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

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

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

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

:root {
  /* === primary (brand #0D3572) === */
  --clr-primary-main: #0d3572;
  --clr-primary-hover: var(--clr-primary-900);
  --clr-primary-shadow: rgba(13, 53, 114, 0.42);
  --clr-primary-shadow-soft: rgba(13, 53, 114, 0.18);
  /* === secondary (neutral; buttons / accents) === */
  --clr-secondary-main: var(--clr-gray-800);
  --clr-secondary-hover: var(--clr-gray-900);
  --clr-secondary-50: var(--clr-gray-50);
  /* === common === */
  --clr-common-background: var(--clr-base-white);
  --clr-common-on-background: var(--clr-base-black);
  /* === text === */
  --clr-text-primary: var(--clr-gray-900);
  --clr-text-secondary: var(--clr-gray-500);
  --clr-text-tertiary: var(--clr-gray-400);
  /* === background === */
  --clr-background-paper: var(--clr-base-white);
  --clr-background-primary: var(--clr-gray-50);
  --clr-background-secondary: var(--clr-primary-50);
  --clr-background-philo: var(--clr-gray-100);
}

:root {
  /* === base === */
  --clr-base-white: #fff;
  --clr-base-black: #000;
  --clr-base-background: #e4ddce;
  --clr-base-background-hover: #c9c4b8;
  --clr-base-background-light: #f3f1eb;
  --clr-text-base: #000000;
  --clr-text-desc: #999999;
  /* === primary scale (50–900, anchor 800 = brand) === */
  --clr-primary-50: #eef2fa;
  --clr-primary-100: #dce5f4;
  --clr-primary-200: #b8c9e8;
  --clr-primary-300: #8aa4d4;
  --clr-primary-400: #5d80c0;
  --clr-primary-500: #3f67ad;
  --clr-primary-600: #2e5294;
  --clr-primary-700: #21427e;
  --clr-primary-800: #0d3572;
  --clr-primary-900: #071f45;
  /* === utils === */
  --clr-gray-50: #f7f7f7;
  --clr-gray-100: #ececec;
  --clr-gray-200: #e0e0e0;
  --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;
  /* === main landing (main.scss) === */
  --clr-main-section-bg: #030712;
  --clr-main-content-bg: rgba(3, 7, 18, 0.58);
  --clr-main-content-border: rgba(148, 163, 184, 0.22);
  --clr-main-content-shadow: rgba(0, 0, 0, 0.45);
  --clr-main-text-muted: rgba(248, 250, 252, 0.88);
  --clr-main-pager-border: rgba(255, 255, 255, 0.45);
  --clr-main-pager-border-strong: rgba(255, 255, 255, 0.85);
  --clr-main-scroll-border: rgba(255, 255, 255, 0.35);
  --clr-main-scroll-bg: rgba(3, 7, 18, 0.35);
  --clr-main-scroll-hover-bg: rgba(59, 130, 246, 0.25);
  --clr-main-scroll-hover-border: rgba(96, 165, 250, 0.65);
  --clr-main-focus-ring: rgba(96, 165, 250, 0.9);
  /* === company page (company.scss) — shell & hero === */
  --clr-company-shell-bg: #0a0c12;
  --clr-company-hero-overlay-1: rgba(10, 12, 18, 0.92);
  --clr-company-hero-overlay-2: rgba(10, 12, 18, 0.45);
  --clr-company-hero-overlay-3: rgba(10, 12, 18, 0.25);
  --clr-company-text-kicker: rgba(255, 255, 255, 0.75);
  --clr-company-text-lead: rgba(255, 255, 255, 0.88);
  --clr-company-possibility-copy: rgba(255, 255, 255, 0.92);
  /* possibility */
  --clr-company-possibility-bg: #1d1d21;
  --clr-company-possibility-overlay: rgba(8, 10, 16, 0.72);
  /* service (light) */
  --clr-company-service-bg: #fff;
  --clr-company-service-text: #111;
  --clr-company-service-heading: #0a0a0a;
  --clr-company-service-border: #e5e5e5;
  --clr-company-service-icon-tint: rgba(0, 32, 91, 0.06);
  --clr-company-service-sub: #6b7280;
  --clr-company-service-body: #4b5563;
  --clr-company-service-detail: #374151;
  --clr-company-aside-bg: #f5f5f5;
  --clr-company-aside-border: #e0e0e0;
  --clr-company-aside-link-hover: #00205b;
  /* project reference */
  --clr-company-project-bg: #151c35;
  --clr-company-project-fade-0: rgba(21, 28, 53, 0);
  --clr-company-project-fade-mid: rgba(21, 28, 53, 0.55);
  --clr-company-project-nav-border: rgba(255, 255, 255, 0.22);
  --clr-company-project-nav-hover-bg: rgba(255, 255, 255, 0.08);
  --clr-company-project-nav-hover-border: rgba(255, 255, 255, 0.4);
  --clr-company-project-timeline: rgba(255, 255, 255, 0.22);
  --clr-company-project-desc: rgba(255, 255, 255, 0.72);
  /* portfolio */
  --clr-company-portfolio-bg: #12141d;
  --clr-company-portfolio-card-bg: #1a1f2e;
  --clr-company-portfolio-cap-gradient-end: rgba(0, 0, 0, 0.82);
  /* clients & marquee */
  --clr-company-clients-text: rgba(255, 255, 255, 0.78);
  --clr-company-tabs-border: rgba(255, 255, 255, 0.15);
  --clr-company-tabs-text: rgba(255, 255, 255, 0.55);
  --clr-company-marquee-edge: rgba(255, 255, 255, 0.08);
  --clr-company-marquee-bg: rgba(255, 255, 255, 0.03);
  /* contact form */
  --clr-company-contact-lead: rgba(255, 255, 255, 0.82);
  --clr-company-form-bg: rgba(18, 20, 29, 0.85);
  --clr-company-form-border: rgba(255, 255, 255, 0.08);
  --clr-company-label: rgba(255, 255, 255, 0.75);
  --clr-company-error: #f87171;
  --clr-company-input-bg: rgba(0, 0, 0, 0.35);
  --clr-company-input-border: rgba(255, 255, 255, 0.12);
  --clr-company-input-placeholder: rgba(255, 255, 255, 0.38);
  --clr-company-input-focus: rgba(59, 130, 246, 0.65);
  --clr-company-privacy-text: rgba(255, 255, 255, 0.88);
  --clr-company-privacy-border: rgba(255, 255, 255, 0.38);
  --clr-company-privacy-face-bg: rgba(0, 0, 0, 0.45);
  --clr-company-privacy-focus: rgba(96, 165, 250, 0.85);
  --clr-company-captcha-border: rgba(255, 255, 255, 0.15);
  --clr-company-captcha-refresh-border: rgba(255, 255, 255, 0.18);
  --clr-company-captcha-refresh-text: rgba(255, 255, 255, 0.85);
  --clr-company-captcha-refresh-hover-border: rgba(255, 255, 255, 0.35);
  --clr-company-captcha-refresh-hover-bg: rgba(255, 255, 255, 0.06);
  /* location */
  --clr-company-location-bg: #1a1a1a;
  --clr-company-location-divider: #333;
  --clr-company-location-dt: #888;
  --clr-company-email-underline: rgba(255, 255, 255, 0.45);
  --clr-company-email-underline-hover: rgba(255, 255, 255, 0.85);
  /* shared overlays (reuse) */
  --clr-overlay-black-35: rgba(0, 0, 0, 0.35);
}

:root {
  --family-pretendard: "Pretendard";
  --family-satoshi: "Satoshi";
  --family-bebas: "Bebas";
  --family-outfit: "Outfit";
  /* === Display (히어로/대제목) === */
  --display-xs-fs: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 7.6427184466rem);
  --display-sm-fs: clamp(3.6rem, 2.3300970874vw + 2.7262135922rem, 8.5980582524rem);
  --display-md-fs: clamp(4rem, 3.1067961165vw + 2.8349514563rem, 10.6640776699rem);
  --display-lg-fs: clamp(6.9rem, 3.8187702265vw + 5.467961165rem, 15.0912621359rem);
  --display-xl-fs: clamp(8rem, 6.9902912621vw + 5.3786407767rem, 22.9941747573rem);
  --display-xs-lh: 1.25;
  --display-sm-lh: 1.2;
  --display-md-lh: 1.15;
  --display-lg-lh: 1.12;
  --display-xl-lh: 1.1;
  --display-xs-fw: 500;
  --display-sm-fw: 500;
  --display-md-fw: 500;
  --display-lg-fw: 500;
  --display-xl-fw: 500;
  /* === Heading (섹션 타이틀) === */
  --heading-xs-fs: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  --heading-sm-fs: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 3.1883495146rem);
  --heading-md-fs: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.6660194175rem);
  --heading-lg-fs: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4.6213592233rem);
  --heading-xl-fs: clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 5.5766990291rem);
  --heading-xs-lh: 1.25;
  --heading-sm-lh: 1.25;
  --heading-md-lh: 1.22;
  --heading-lg-lh: 1.2;
  --heading-xl-lh: 1.15;
  --heading-xs-fw: 700;
  --heading-sm-fw: 700;
  --heading-md-fw: 700;
  --heading-lg-fw: 700;
  --heading-xl-fw: 700;
  /* === Body (본문/UI 텍스트) === */
  --body-xs-fs: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  --body-sm-fs: clamp(1.3rem, 0.1941747573vw + 1.227184466rem, 1.7165048544rem);
  --body-md-fs: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem); /* 기본 본문 */
  --body-lg-fs: clamp(1.5rem, 0.3236245955vw + 1.3786407767rem, 2.1941747573rem);
  --body-xl-fs: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem);
  --body-xs-lh: 1.6;
  --body-sm-lh: 1.6;
  --body-md-lh: 1.65;
  --body-lg-lh: 1.6;
  --body-xl-lh: 1.55;
  --body-xs-fw: 300;
  --body-sm-fw: 300;
  --body-md-fw: 300;
  --body-lg-fw: 300;
  --body-xl-fw: 300;
}

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

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, 5.732038835rem);
  --section-sm: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 7.6427184466rem);
  --section-md: clamp(4.8rem, 3.1067961165vw + 3.6349514563rem, 11.4640776699rem);
  --section-lg: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 15.2854368932rem);
  --section-xl: clamp(9.6rem, 4.142394822vw + 8.0466019417rem, 18.4854368932rem);
  /* === Border Radius (유동 반경) === */
  --radius-xs: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4776699029rem);
  --radius-sm: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem);
  --radius-md: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.9106796117rem);
  --radius-lg: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.8660194175rem);
  --radius-xl: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.8213592233rem);
  --radius-round: 9999px;
  /* === Spacing (마진·패딩 기본 단위, fluid 적용) === */
  --spacing-xxs: clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4776699029rem);
  --spacing-xs: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem);
  --spacing-sm: clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.4330097087rem);
  --spacing-md: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.9106796117rem);
  --spacing-lg: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.8660194175rem);
  --spacing-xl: clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.8213592233rem);
  --spacing-2xl: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 5.732038835rem);
  --spacing-3xl: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 7.6427184466rem);
  --spacing-4xl: clamp(4.8rem, 3.1067961165vw + 3.6349514563rem, 11.4640776699rem);
  --spacing-5xl: clamp(6.4rem, 4.142394822vw + 4.8466019417rem, 15.2854368932rem);
}

@font-face {
  font-family: Outfit;
  src: local("Outfit/Outfit Light"), url("/assets/fonts/Outfit/Outfit-Light.woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Outfit;
  src: local("Outfit/Outfit Regular"), url("/assets/fonts/Outfit/Outfit-Regular.woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Outfit;
  src: local("Outfit/Outfit Medium"), url("/assets/fonts/Outfit/Outfit-Medium.woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Outfit;
  src: local("Outfit/Outfit Bold"), url("/assets/fonts/Outfit/Outfit-Bold.woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

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

::selection {
  background: #000;
  color: #fff;
}

::-webkit-scrollbar {
  background-color: #fff;
  width: 0.3rem;
}

::-webkit-scrollbar-thumb {
  background-color: #000;
}

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

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

img {
  width: 100%;
}

a {
  text-decoration: none;
}

em,
address {
  font-style: normal;
}

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

label {
  cursor: pointer;
}

textarea {
  resize: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.no-mg-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-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-kr {
  font-family: var(--family-pretendard);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.--hidden {
  overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.wh {
  color: #fff;
}

.--highlight {
  color: var(--clr-secondary-main);
  font-weight: 600;
}

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

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

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

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

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

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

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

body.drawer-open {
  overflow: hidden;
}

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

.drawer {
  --drawer-mask-dur: 0.72s;
  --drawer-mask-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --drawer-fade-dur: 0.38s;
  position: fixed;
  inset: 0;
  z-index: var(--drawer-z-index);
  /* 단색 전체 배경 없음 — 컬럼(이미지+오버레이)만 보이고, 닫힐 때 뒤 페이지가 비치도록 */
  background: transparent;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--drawer-fade-dur) var(--drawer-mask-ease), visibility var(--drawer-fade-dur);
}
.drawer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.drawer__shell {
  position: relative;
  height: 100%;
  min-height: 100dvh;
}
.drawer__close {
  position: absolute;
  top: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem);
  right: clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 3.2660194175rem);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(4.4rem, 0.2588996764vw + 4.3029126214rem, 4.9553398058rem);
  height: clamp(4.4rem, 0.2588996764vw + 4.3029126214rem, 4.9553398058rem);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(3, 7, 18, 0.45);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.drawer__close .fa-xmark {
  font-size: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2.2330097087rem);
  line-height: 1;
}
.drawer__close:hover {
  background: rgba(255, 255, 255, 0.12);
}
.drawer__close:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.9);
  outline-offset: 3px;
}
.drawer__inner {
  height: 100%;
  min-height: 100dvh;
}
.drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  height: 100%;
  min-height: 100dvh;
}
@media (max-width: 1024px) {
  .drawer__list {
    flex-direction: column;
  }
}
.drawer__item {
  flex: 1 1 25%;
  min-width: 0;
  margin: 0;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--drawer-mask-dur) var(--drawer-mask-ease), -webkit-clip-path var(--drawer-mask-dur) var(--drawer-mask-ease);
  will-change: clip-path;
}
.drawer__item:last-child {
  border-right: none;
}
@media (max-width: 1024px) {
  .drawer__item {
    flex: 1 1 auto;
    min-height: 25dvh;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .drawer__item:last-child {
    border-bottom: none;
  }
}
.drawer.is-open:not(.is-closing) .drawer__item {
  clip-path: inset(0 0 0 0);
}
.drawer.is-open:not(.is-closing) .drawer__item:nth-child(1) {
  transition-delay: 0s;
}
.drawer.is-open:not(.is-closing) .drawer__item:nth-child(2) {
  transition-delay: 0.07s;
}
.drawer.is-open:not(.is-closing) .drawer__item:nth-child(3) {
  transition-delay: 0.14s;
}
.drawer.is-open:not(.is-closing) .drawer__item:nth-child(4) {
  transition-delay: 0.21s;
}
.drawer.is-open:not(.is-closing) .drawer__item:nth-child(5) {
  transition-delay: 0.28s;
}
.drawer.is-open:not(.is-closing) .drawer__item:nth-child(6) {
  transition-delay: 0.35s;
}
.drawer.is-open:not(.is-closing) .drawer__item:nth-child(7) {
  transition-delay: 0.42s;
}
.drawer.is-open:not(.is-closing) .drawer__item:nth-child(8) {
  transition-delay: 0.49s;
}
.drawer.is-closing .drawer__item {
  clip-path: inset(100% 0 0 0);
}
.drawer.is-closing .drawer__item:nth-child(1) {
  transition-delay: 0.21s;
}
.drawer.is-closing .drawer__item:nth-child(2) {
  transition-delay: 0.14s;
}
.drawer.is-closing .drawer__item:nth-child(3) {
  transition-delay: 0.07s;
}
.drawer.is-closing .drawer__item:nth-child(4) {
  transition-delay: 0s;
}
.drawer.is-closing .drawer__item:nth-child(5) {
  transition-delay: 0.28s;
}
.drawer.is-closing .drawer__item:nth-child(6) {
  transition-delay: 0.21s;
}
.drawer.is-closing .drawer__item:nth-child(7) {
  transition-delay: 0.14s;
}
.drawer.is-closing .drawer__item:nth-child(8) {
  transition-delay: 0.07s;
}
@media (prefers-reduced-motion: reduce) {
  .drawer {
    --drawer-mask-dur: 0.01s;
  }
  .drawer__item {
    clip-path: none !important;
    transition: none;
  }
}
.drawer__link {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 0;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .drawer__link {
    min-height: 25dvh;
  }
}
.drawer__link:hover .drawer__img {
  transform: scale(1.05);
}
.drawer__link:hover .drawer__overlay {
  background: rgba(2, 6, 23, 0.52);
}
.drawer__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.drawer__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.drawer__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(2, 6, 23, 0.42);
  transition: background 0.35s ease;
  pointer-events: none;
}
.drawer__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2.4rem;
  width: 100%;
  height: 100%;
  padding: clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 5.5766990291rem) clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem) clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 6.532038835rem);
  box-sizing: border-box;
}
.drawer__kicker {
  margin: 0;
  font-size: clamp(1.1rem, 0.1294498382vw + 1.0514563107rem, 1.3776699029rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.92);
}
.drawer__title {
  margin: 0;
  font-size: clamp(2.4rem, 1.1650485437vw + 1.9631067961rem, 4.8990291262rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: center;
}

.no-footer {
  background: #000;
  color: #fff;
  padding: clamp(4rem, 3.1067961165vw + 2.8349514563rem, 10.6640776699rem) 0 max(clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 5.732038835rem), env(safe-area-inset-bottom, 0px));
  width: 100%;
}
.no-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 7.6427184466rem);
}
@media (max-width: 1024px) {
  .no-footer__top {
    flex-direction: column;
    align-items: stretch;
  }
}
.no-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.no-footer__logo {
  display: block;
  max-width: clamp(10rem, 1.2944983819vw + 9.5145631068rem, 12.7766990291rem);
}
.no-footer__logo img {
  display: block;
  width: 100%;
  max-width: clamp(24rem, 10.355987055vw + 20.1165048544rem, 46.213592233rem);
  height: auto;
}
.no-footer__company {
  margin-top: clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 3.2660194175rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: clamp(28rem, 28.4789644013vw + 17.3203883495rem, 89.0873786408rem);
}
.no-footer__company-line {
  margin: 0;
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  word-break: keep-all;
}
.no-footer__company-line a,
.no-footer__company-line a:link,
.no-footer__company-line a:visited,
.no-footer__company-line a:hover,
.no-footer__company-line a:active,
.no-footer__company-line [x-apple-data-detectors],
.no-footer__company-line [x-apple-data-detectors]:link,
.no-footer__company-line [x-apple-data-detectors]:visited,
.no-footer__company-line [x-apple-data-detectors]:hover,
.no-footer__company-line [x-apple-data-detectors]:active {
  color: inherit !important;
  -webkit-text-fill-color: currentColor;
  text-decoration: none !important;
  font: inherit !important;
}
.no-footer__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(1.8rem, 0.9061488673vw + 1.4601941748rem, 3.7436893204rem);
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  .no-footer__aside {
    align-items: flex-end;
    width: 100%;
  }
}
@media (max-width: 544px) {
  .no-footer__aside {
    align-items: flex-start;
  }
}
.no-footer__social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.no-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 5.1106796117rem);
  height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 5.1106796117rem);
  border-radius: 50%;
  background: #1a2f4a;
  color: #fff;
  text-decoration: none;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.no-footer__social-link:hover {
  background: #243b5c;
}
.no-footer__social-link i {
  font-size: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
}
.no-footer__nav {
  width: 100%;
}
.no-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: clamp(1.2rem, 1.0355987055vw + 0.8116504854rem, 3.4213592233rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 544px) {
  .no-footer__nav-list {
    justify-content: flex-start;
  }
}
.no-footer__nav-list a {
  color: #fff;
  -webkit-text-fill-color: currentColor;
  text-decoration: none;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  font-weight: 500;
  white-space: nowrap;
}
.no-footer__nav-list a:link, .no-footer__nav-list a:visited, .no-footer__nav-list a:active {
  color: #fff;
}
.no-footer__nav-list a:hover {
  text-decoration: underline;
}
.no-footer__rule {
  height: 1px;
  margin: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4.6213592233rem) 0 clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  background: rgba(255, 255, 255, 0.18);
}
.no-footer__copyright {
  margin: 0;
  font-size: clamp(1.1rem, 0.1294498382vw + 1.0514563107rem, 1.3776699029rem);
  color: #9e9e9e;
}

@keyframes no-footer-main-nav-drawer-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.no-main__section--footer .no-footer--main-end .no-footer__nav-list li {
  opacity: 0;
  transform: translateX(18px);
}
.no-main__section--footer.active .no-footer--main-end .no-footer__nav-list li {
  animation: no-footer-main-nav-drawer-in 0.45s ease forwards;
}
.no-main__section--footer.active .no-footer--main-end .no-footer__nav-list li:nth-child(1) {
  animation-delay: 0.26s;
}
.no-main__section--footer.active .no-footer--main-end .no-footer__nav-list li:nth-child(2) {
  animation-delay: 0.18s;
}
.no-main__section--footer.active .no-footer--main-end .no-footer__nav-list li:nth-child(3) {
  animation-delay: 0.1s;
}
.no-main__section--footer.active .no-footer--main-end .no-footer__nav-list li:nth-child(4) {
  animation-delay: 0.02s;
}

@media (prefers-reduced-motion: reduce) {
  .no-main__section--footer .no-footer--main-end .no-footer__nav-list li {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.form-popup {
  width: 920px;
  height: 79vh;
  max-height: 735px;
  background: #fff;
  padding: 80px 0;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
  transform: translate(-50%, -50%);
  display: none;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .form-popup {
    width: 90%;
  }
}
@media (max-width: 544px) {
  .form-popup {
    padding: 6rem 0;
  }
}
.form-popup i {
  width: clamp(3.5rem, 0.6472491909vw + 3.2572815534rem, 4.8883495146rem);
  height: clamp(3.5rem, 0.6472491909vw + 3.2572815534rem, 4.8883495146rem);
  background: none;
  border: 1px solid #000;
  border-radius: 50%;
  position: absolute;
  top: 2rem;
  right: 3rem;
  z-index: 2;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-popup .title {
  margin-bottom: 10px;
  padding: 0 clamp(1rem, 1.9417475728vw + 0.2718446602rem, 5.1650485437rem);
}
.form-popup .title p {
  font-size: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.6660194175rem);
  font-weight: 700;
  padding: 0 10px;
  padding-bottom: 15px;
  border-bottom: 1px solid #000;
}
.form-popup .content {
  height: calc(100% - 68px);
  padding-left: clamp(1rem, 1.9417475728vw + 0.2718446602rem, 5.1650485437rem);
  padding-right: clamp(1rem, 1.9417475728vw + 0.2718446602rem, 5.1650485437rem);
}
.form-popup .content .scroll-box {
  height: 100%;
  padding-top: 30px;
  padding-right: 30px;
  padding-left: 1rem;
  overflow-y: scroll;
}
.form-popup .content .scroll-box ul {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.form-popup .content .scroll-box ul li h3 {
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8776699029rem);
  font-weight: 500;
  color: var(--clr-gray-900);
  margin-bottom: 0.5rem;
}
.form-popup .content .scroll-box ul li p {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  color: var(--clr-gray-900);
}

.popup-bg {
  width: 100vw;
  height: 100vh;
  background: #000;
  opacity: 0.6;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  display: none;
}
.popup-bg.active {
  display: block;
}

.no-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding-top: env(safe-area-inset-top, 0px);
  z-index: var(--header-z-index);
  transition: border 0.3s, background 0.35s ease;
  color: #fff;
}
.no-header__container {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: max(clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.8213592233rem), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(1.6rem, 1.0355987055vw + 1.2116504854rem, 3.8213592233rem), env(safe-area-inset-right, 0px));
}
.no-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 2.0330097087rem) 0;
  min-height: clamp(3.6rem, 0.7766990291vw + 3.3087378641rem, 5.2660194175rem);
}
.no-header__hamburger {
  --burger-w: clamp(2.125rem, 0.4045307443vw + 1.9733009709rem, 2.9927184466rem);
  --burger-h: clamp(1.25rem, 0.2427184466vw + 1.1589805825rem, 1.770631068rem);
  --burger-line: 2px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--burger-w);
  height: var(--burger-h);
  flex-shrink: 0;
  cursor: pointer;
  padding: clamp(0.35rem, 0.0970873786vw + 0.313592233rem, 0.5582524272rem) clamp(0.15rem, 0.0647249191vw + 0.1257281553rem, 0.2888349515rem);
  box-sizing: content-box;
}
@media (max-width: 768px) {
  .no-header__hamburger {
    padding: max(clamp(0.35rem, 0.0970873786vw + 0.313592233rem, 0.5582524272rem), 1rem) max(clamp(0.15rem, 0.0647249191vw + 0.1257281553rem, 0.2888349515rem), 0.85rem);
  }
}
.no-header__hamburger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 4px;
  border-radius: 2px;
}
.no-header__hamburger span {
  display: block;
  height: var(--burger-line);
  width: 100%;
  background-color: #fff;
  border-radius: 1px;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, width 0.25s ease;
}
.no-header__hamburger span:nth-child(2) {
  width: 68%;
  margin-left: auto;
}
html[data-drawer-open=true] .no-header .no-header__hamburger span:nth-child(1) {
  transform: translateY(calc(var(--burger-h) / 2 - var(--burger-line) / 2)) rotate(45deg);
}
html[data-drawer-open=true] .no-header .no-header__hamburger span:nth-child(2) {
  opacity: 0;
  width: 0 !important;
  margin-left: auto;
}
html[data-drawer-open=true] .no-header .no-header__hamburger span:nth-child(3) {
  transform: translateY(calc(-1 * (var(--burger-h) / 2 - var(--burger-line) / 2))) rotate(-45deg);
}
.no-header__toggle {
  height: 100%;
  color: inherit;
  transition: color 0.25s ease;
}
.no-header__logo {
  max-width: clamp(3.25rem, 0.9708737864vw + 2.8859223301rem, 5.3325242718rem);
  width: 100%;
}
.no-header__logo a {
  display: flex;
  align-items: center;
  width: 100%;
}
.no-header__logo img {
  width: 100%;
  height: auto;
  max-height: clamp(2.75rem, 0.6472491909vw + 2.5072815534rem, 4.1383495146rem);
  object-fit: contain;
  display: block;
}
.no-header__logo a.svg-reveal {
  --dur: 0.8s;
  --stagger: 0.05s;
  --lift: 100%;
  display: inline-block;
  overflow: hidden;
  line-height: 1;
  vertical-align: top;
}
.no-header__logo a.svg-reveal svg {
  display: block;
  overflow: visible;
}
.no-header__logo a.svg-reveal svg path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: transform var(--dur) cubic-bezier(0.22, 1, 0.36, 1), opacity var(--dur) ease, fill 0.25s ease;
}
.no-header__logo a.svg-reveal .rd.a path {
  transform: translateY(0);
  transition-delay: calc(var(--i) * var(--stagger));
}
.no-header__logo a.svg-reveal .rd.b path {
  transform: translateY(110%);
  transition-delay: calc(var(--i) * var(--stagger));
}
.no-header__logo a.svg-reveal:hover .rd.a path {
  transform: translateY(calc(-1 * var(--lift)));
}
.no-header__logo a.svg-reveal:hover .rd.b path {
  transform: translateY(0);
}
.no-header__action {
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
  justify-content: flex-end;
}
.no-header__action.out {
  display: none;
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  mix-blend-mode: difference;
  z-index: 99;
}
.no-header__action.out .sound-wrap {
  color: #fff;
}
.no-header__action.out .sound-wrap .sound-wave.on {
  border-color: #fff;
}
.no-header__action.out .sound-wrap .sound-wave.on .square {
  background-color: #fff;
}
.no-header__action.out .sound-wrap .sound-wave.off {
  border-color: #fff;
}
.no-header__action.out .sound-wrap .sound-wave.off .stop {
  background-color: #fff;
}
.no-header__action.out .sound-wrap .hover-show {
  border: 1px solid #fff;
  color: #fff;
}
.no-header__action.out .sound-wrap .hover-show i {
  color: #fff;
}
@media (max-width: 544px) {
  .no-header__action {
    display: none;
  }
  .no-header__action.out {
    display: flex;
  }
  .no-header__action.out .sound-wrap {
    width: 100%;
  }
  .no-header__action.out .sound-wrap .sound-title {
    margin-right: 1rem;
  }
}
.no-header__action .sound-wrap {
  height: 3.5rem;
  color: #000;
  transition: color 0.25s ease, border-color 0.25s ease;
  position: relative;
  width: 20rem;
}
.no-header__action .sound-wrap.sound-wrap--no-tracks {
  display: none !important;
}
.no-header__action .sound-wrap:hover .sound-wave {
  opacity: 0 !important;
}
.no-header__action .sound-wrap:hover .hover-show {
  opacity: 1;
  pointer-events: all;
}
.no-header__action .sound-wrap .sound-wave.on {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  height: 100%;
  right: 0;
  top: 0;
  border: 1px solid #000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.3rem;
  padding-bottom: 1rem;
  cursor: pointer;
}
.no-header__action .sound-wrap .sound-wave.on .square {
  background-color: #000;
  width: 0.2rem;
  transform-origin: center bottom;
  animation: barBeat var(--dur, 1.2s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
.no-header__action .sound-wrap .sound-wave.on .square:nth-child(1) {
  --dur: 0.9s;
  --delay: 0s;
  --min: 0.7;
  --max: 1.6;
  height: 0.5rem;
}
.no-header__action .sound-wrap .sound-wave.on .square:nth-child(2) {
  --dur: 1.1s;
  --delay: 0.1s;
  --min: 0.6;
  --max: 1.7;
  height: 1rem;
}
.no-header__action .sound-wrap .sound-wave.on .square:nth-child(3) {
  --dur: 0.95s;
  --delay: 0.2s;
  --min: 0.65;
  --max: 1.7;
  height: 0.7rem;
}
.no-header__action .sound-wrap .sound-wave.on .square:nth-child(4) {
  --dur: 1.05s;
  --delay: 0.3s;
  --min: 0.6;
  --max: 1.5;
  height: 0.5rem;
}
@keyframes barBeat {
  0%, 100% {
    transform: scaleY(var(--min, 0.7));
  }
  50% {
    transform: scaleY(var(--max, 1.6));
  }
}
.no-header__action .sound-wrap .sound-wave.off {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  height: 100%;
  right: 0;
  top: 0;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  cursor: pointer;
  opacity: 0;
}
.no-header__action .sound-wrap .sound-wave.off .stop {
  background-color: #000;
  width: 0.3rem;
  aspect-ratio: 1;
  border-radius: 555%;
}
@media (max-width: 768px) {
  .no-header__action .sound-wrap {
    width: 15rem;
  }
}
.no-header__action .sound-wrap .hover-show {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1.4rem;
  border: 1px solid #000;
  border-radius: 5.5rem;
  color: #000;
  width: 100%;
  transition: color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
  position: relative;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}
.no-header__action .sound-wrap .sound-toggle {
  margin-right: 1rem;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.no-header__action .sound-wrap .sound-toggle i {
  font-size: 1.4rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.no-header__action .sound-wrap .sound-toggle .off {
  display: none;
}
.no-header__action .sound-wrap.is-paused .sound-toggle .on {
  display: none;
}
.no-header__action .sound-wrap.is-paused .sound-wave.on {
  opacity: 0;
}
.no-header__action .sound-wrap.is-paused .sound-wave.off {
  opacity: 1;
}
.no-header__action .sound-wrap.is-paused .sound-toggle .off {
  display: inline-block;
}
.no-header__action .sound-wrap .sound-title {
  font-size: 1.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.no-header__action .sound-wrap .sound-arrows {
  margin-left: auto;
  display: flex;
  height: 1.6rem;
}
.no-header__action .sound-wrap .sound-arrows button {
  width: 1.6rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-header__action .sound-wrap .sound-arrows button.sound-prev {
  padding-top: 0.2rem;
}
.no-header__action .sound-wrap .sound-arrows button i {
  font-size: 1.2rem;
}
.no-header__action .user-wrap {
  display: flex;
  align-items: center;
  color: inherit;
  --uw-size: 3.5rem; /* 사운드트랙 원(.sound-wave)과 동일 */
  --uw-menu-w: 22rem;
  --uw-ease: 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.no-header__action .user-wrap__sign-in {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  color: inherit;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: opacity var(--uw-ease), transform 0.2s ease;
}
.no-header__action .user-wrap__sign-in:hover {
  opacity: 0.85;
}
.no-header__action .user-wrap__sign-in:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.no-header__action .user-wrap__sign-in-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
@media (max-width: 768px) {
  .no-header__action .user-wrap__sign-in-label {
    display: none;
  }
}
.no-header__action .user-wrap__dropdown {
  position: relative;
}
.no-header__action .user-wrap__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--uw-size);
  height: var(--uw-size);
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color var(--uw-ease), transform 0.2s ease;
}
.no-header__action .user-wrap__trigger:hover {
  border-color: currentColor;
}
.no-header__action .user-wrap__trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.no-header__action .user-wrap__avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--clr-gray-200, #e5e5e5);
}
.no-header__action .user-wrap__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.no-header__action .user-wrap__avatar-icon,
.no-header__action .user-wrap__avatar svg {
  width: 52%;
  height: 52%;
  color: var(--clr-gray-600, #525252);
  flex-shrink: 0;
}
.no-header__action .user-wrap__menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  min-width: var(--uw-menu-w);
  background: var(--clr-common-background, #fff);
  border: 1px solid var(--clr-common-on-background, #000);
  border-radius: 0.5rem;
  z-index: 100;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition: opacity var(--uw-ease), transform var(--uw-ease), visibility var(--uw-ease);
}
.no-header__action .user-wrap__menu[hidden] {
  display: none !important;
}
.no-header__action .user-wrap__menu:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.no-header__action .user-wrap__menu-inner {
  padding: 0.75rem 0;
}
.no-header__action .user-wrap__menu-item {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  width: 100%;
  padding: 0.9375rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--clr-text-primary, #000);
  text-decoration: none;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.02em;
  transition: background var(--uw-ease);
}
.no-header__action .user-wrap__menu-item:hover {
  background: var(--clr-gray-100, #f0f0f0);
}
.no-header__action .user-wrap__menu-item:focus-visible {
  outline: none;
  background: var(--clr-gray-100, #f0f0f0);
}
.no-header__action .user-wrap__menu-item--btn {
  width: 100%;
  color: var(--clr-text-secondary, #333);
}
.no-header__action .user-wrap__menu-item--btn:hover {
  background: var(--clr-gray-100, #f0f0f0);
  color: var(--clr-text-primary, #000);
}
.no-header__action .user-wrap__menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  flex-shrink: 0;
  color: var(--clr-text-primary, #000);
  font-size: 1.3125rem;
}
.user-wrap__menu-item:hover .no-header__action .user-wrap__menu-icon, .user-wrap__menu-item:focus-visible .no-header__action .user-wrap__menu-icon {
  color: inherit;
}
.no-header__action .user-wrap__menu-divider {
  height: 1px;
  margin: 0.5rem 1rem;
  background: var(--clr-gray-300, #ccc);
}
.no-header__action .user-wrap__menu-form {
  margin: 0;
  padding: 0;
}
.no-header__action .language {
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media (max-width: 768px) {
  .no-header__action .language {
    display: none;
  }
}
.no-header__action .language a {
  opacity: 0.4;
  width: max-content;
  transition: opacity 0.3s, color 0.25s ease;
  color: inherit;
}
.no-header__action .language a:hover {
  opacity: 1;
}
.no-header__action .language a.active {
  opacity: 1;
  pointer-events: none;
}
html[data-header-invert=true] .no-header, html[data-header-lock=true] .no-header {
  color: #fff;
  background-color: transparent;
  border-bottom: none;
}
html[data-header-invert=true] .no-header.no-header--scrolling, html[data-header-lock=true] .no-header.no-header--scrolling {
  background-color: var(--clr-primary-main);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
html[data-header-invert=true] .no-header.no-header--scrolling::before, html[data-header-lock=true] .no-header.no-header--scrolling::before {
  opacity: 0;
}
html[data-header-invert=true] .no-header .no-header__toggle, html[data-header-lock=true] .no-header .no-header__toggle {
  color: #fff;
}
html[data-header-invert=true] .no-header .no-header__hamburger span, html[data-header-lock=true] .no-header .no-header__hamburger span {
  background-color: #fff;
}
html[data-header-invert=true] .no-header .no-header__logo svg path, html[data-header-lock=true] .no-header .no-header__logo svg path {
  fill: #fff !important;
}
html[data-header-invert=true] .no-header .no-header__action .sound-wrap, html[data-header-lock=true] .no-header .no-header__action .sound-wrap {
  color: #fff;
  border-color: #fff;
}
html[data-header-invert=true] .no-header .no-header__action .sound-wrap i, html[data-header-lock=true] .no-header .no-header__action .sound-wrap i {
  color: #fff;
}
html[data-header-invert=true] .no-header .no-header__action .sound-wrap .hover-show, html[data-header-lock=true] .no-header .no-header__action .sound-wrap .hover-show {
  border-color: #fff;
  color: #fff;
}
html[data-header-invert=true] .no-header .no-header__action .sound-wrap .sound-wave, html[data-header-lock=true] .no-header .no-header__action .sound-wrap .sound-wave {
  border-color: #fff;
}
html[data-header-invert=true] .no-header .no-header__action .sound-wrap .sound-wave .square, html[data-header-lock=true] .no-header .no-header__action .sound-wrap .sound-wave .square {
  background-color: #fff;
}
html[data-header-invert=true] .no-header .no-header__action .sound-wrap .sound-wave .stop, html[data-header-lock=true] .no-header .no-header__action .sound-wrap .sound-wave .stop {
  background-color: #fff;
}
html[data-header-invert=true] .no-header .no-header__action .user-wrap, html[data-header-lock=true] .no-header .no-header__action .user-wrap {
  color: #fff;
}
html[data-header-invert=true] .no-header .no-header__action .user-wrap__sign-in, html[data-header-lock=true] .no-header .no-header__action .user-wrap__sign-in {
  color: #fff;
  border-color: #fff;
}
html[data-header-invert=true] .no-header .no-header__action .user-wrap__trigger, html[data-header-lock=true] .no-header .no-header__action .user-wrap__trigger {
  border-color: transparent;
}
html[data-header-invert=true] .no-header .no-header__action .user-wrap__trigger:hover, html[data-header-lock=true] .no-header .no-header__action .user-wrap__trigger:hover {
  border-color: #fff;
}
html[data-header-invert=true] .no-header .no-header__action .user-wrap__menu, html[data-header-lock=true] .no-header .no-header__action .user-wrap__menu {
  background: var(--clr-common-background, #fff);
  border: 1px solid var(--clr-common-on-background, #000);
  box-shadow: 0 4px 0 0 var(--clr-common-on-background, #000);
}
html[data-header-invert=true] .no-header .no-header__action .user-wrap__menu-item, html[data-header-invert=true] .no-header .no-header__action .user-wrap__menu-item--btn, html[data-header-lock=true] .no-header .no-header__action .user-wrap__menu-item, html[data-header-lock=true] .no-header .no-header__action .user-wrap__menu-item--btn {
  color: var(--clr-text-primary, #000);
}
html[data-header-invert=true] .no-header .no-header__action .user-wrap__menu-item--btn, html[data-header-lock=true] .no-header .no-header__action .user-wrap__menu-item--btn {
  color: var(--clr-text-secondary, #333);
}
html[data-header-invert=true] .no-header .no-header__action .user-wrap__menu-item:hover, html[data-header-invert=true] .no-header .no-header__action .user-wrap__menu-item--btn:hover, html[data-header-lock=true] .no-header .no-header__action .user-wrap__menu-item:hover, html[data-header-lock=true] .no-header .no-header__action .user-wrap__menu-item--btn:hover {
  background: var(--clr-gray-100, #f0f0f0);
  color: var(--clr-text-primary, #000);
}
html[data-header-invert=true] .no-header .no-header__action .user-wrap__menu-icon, html[data-header-lock=true] .no-header .no-header__action .user-wrap__menu-icon {
  color: var(--clr-text-primary, #000);
}
html[data-header-invert=true] .no-header .no-header__action .user-wrap__menu-item:hover .user-wrap__menu-icon, html[data-header-invert=true] .no-header .no-header__action .user-wrap__menu-item--btn:hover .user-wrap__menu-icon, html[data-header-lock=true] .no-header .no-header__action .user-wrap__menu-item:hover .user-wrap__menu-icon, html[data-header-lock=true] .no-header .no-header__action .user-wrap__menu-item--btn:hover .user-wrap__menu-icon {
  color: inherit;
}
html[data-header-invert=true] .no-header .no-header__action .user-wrap__menu-divider, html[data-header-lock=true] .no-header .no-header__action .user-wrap__menu-divider {
  background: var(--clr-gray-300, #ccc);
}
html[data-header-invert=true] .no-header .no-header__action .language a, html[data-header-lock=true] .no-header .no-header__action .language a {
  color: #fff;
}

.sound-wrap--no-tracks {
  display: none !important;
}

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

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

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

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

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

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

/*
 * 브랜드 CTA = index.php 히어로 링크와 동일 (직각, 1px 테두리, 글래스, 그림자, ↗ 화살)
 * 조합 예: no-btn no-btn--md no-btn--primary
 */
/* —— Primary filled (네이비 글래스) —— */
/* —— Primary outline (라이트 배경·비강조, 팀 필터 등) —— */
/* —— Dark 배경용 화이트 글래스 —— */
.no-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  color: #000;
  position: relative;
  padding: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem) clamp(1.5rem, 0.3236245955vw + 1.3786407767rem, 2.1941747573rem);
  border: 2px solid #000;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  font-weight: 400;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
}
.no-btn:hover {
  background-color: #000;
}
.no-btn:hover span {
  color: #fff;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (prefers-color-scheme: dark) {
  :root {
    --e-bg: #09090b;
    --e-fg: #fafafa;
    --e-muted: #a1a1aa;
    --e-line: #3f3f46;
    --e-line-light: #27272a;
    --e-accent: #f87171;
    --e-accent-bg: #450a0a;
    --e-code-bg: #18181b;
    --e-code-fg: #e4e4e7;
  }
}
.e-body {
  margin: 0;
  background: var(--e-bg);
  color: var(--e-fg);
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  font-family: 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-line);
}
.e-404__icon svg {
  width: 64px;
  height: 64px;
  stroke-width: 1.5;
}

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

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

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

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

.e-404__foot {
  margin-top: 40px;
  font-size: 11px;
  color: var(--e-muted);
  letter-spacing: 0.02em;
}

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

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

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

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

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

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

.e-error__exception {
  font-size: 12px;
  color: var(--e-muted);
  font-family: ui-monospace, monospace;
  padding: 4px 10px;
  background: var(--e-line-light);
  border-radius: 4px;
  border: 1px solid var(--e-line);
}

.e-error__title {
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--e-fg);
  line-height: 1.25;
}

.e-error__desc {
  font-size: 15px;
  color: var(--e-muted);
  margin: 0 0 24px;
  line-height: 1.6;
}
.e-error__desc .e-error__path {
  padding: 2px 8px;
  background: var(--e-line-light);
  border-radius: 4px;
  font-size: 13px;
}

.e-error__source {
  margin: 24px 0;
  border: 1px solid var(--e-line-light);
  border-radius: 8px;
  overflow: hidden;
}

.e-error__source-header {
  padding: 12px 16px;
  font-size: 12px;
  font-family: ui-monospace, monospace;
  background: var(--e-line-light);
  color: var(--e-fg);
  border-bottom: 1px solid var(--e-line);
}

.e-error__source-file {
  color: var(--e-muted);
}

.e-error__source-line {
  color: var(--e-accent);
  font-weight: 600;
}

.e-error__snippet {
  background: var(--e-code-bg);
  color: var(--e-code-fg);
}

.e-error__snippet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
}

.e-error__snippet-row td {
  padding: 4px 16px;
  vertical-align: top;
}
.e-error__snippet-row--active td {
  background: var(--e-accent-bg);
  color: var(--e-accent);
}
.e-error__snippet-row--active .e-error__snippet-num {
  color: var(--e-accent);
  font-weight: 600;
}

.e-error__snippet-num {
  width: 1%;
  min-width: 48px;
  padding-right: 16px;
  text-align: right;
  user-select: none;
  color: var(--e-muted);
}

.e-error__snippet-code code {
  display: block;
  white-space: pre;
  overflow-x: auto;
}

.e-error__meta {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--e-line-light);
  border-radius: 8px;
  font-size: 13px;
  background: var(--e-bg);
}
.e-error__meta dt {
  color: var(--e-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.e-error__meta dd {
  margin: 0 0 16px;
  word-break: break-all;
}
.e-error__meta dd:last-child {
  margin-bottom: 0;
}
.e-error__meta dd code {
  padding: 2px 6px;
  background: var(--e-line-light);
  border-radius: 4px;
  font-size: 12px;
}

.e-error__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0;
}

.e-error__foot {
  font-size: 12px;
  color: var(--e-muted);
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--e-line-light);
}

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

.e-error__details {
  margin-top: 24px;
  border: 1px solid var(--e-line-light);
  border-radius: 8px;
  overflow: hidden;
}

.e-error__details-summary {
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  background: var(--e-line-light);
  color: var(--e-fg);
  user-select: none;
}
.e-error__details-summary:hover {
  background: var(--e-line);
}

.e-error__pre {
  margin: 0;
  padding: 16px;
  max-height: 320px;
  overflow: auto;
  font-size: 11px;
  line-height: 1.5;
  font-family: ui-monospace, monospace;
  background: var(--e-code-bg);
  color: var(--e-code-fg);
}

.e-btn--link {
  border-color: transparent;
  text-decoration: underline;
  color: var(--e-muted);
}
.e-btn--link:hover {
  background: transparent;
  border-color: transparent;
  color: var(--e-fg);
  opacity: 1;
}

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

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

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

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

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

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

.auth-page__field {
  width: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.comm-page {
  min-height: 100vh;
  padding: clamp(12rem, 5.1779935275vw + 10.0582524272rem, 23.1067961165rem) clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4.7766990291rem) clamp(4rem, 1.2944983819vw + 3.5145631068rem, 6.7766990291rem);
  background: var(--clr-base-white);
  overflow-x: hidden;
}
.comm-page__success-box {
  max-width: 164rem;
  margin: 0 auto clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem) auto;
  padding: 12px 16px;
  border: 1px solid var(--clr-success, #50cd89);
  background: var(--clr-success-light, #e8fff3);
  color: var(--clr-text-primary);
  font-size: 14px;
  line-height: 1.5;
}
.comm-page__header {
  max-width: 164rem;
  margin: 0 auto clamp(3rem, 2.5889967638vw + 2.0291262136rem, 8.5533980583rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
  flex-wrap: wrap;
}
.comm-page__title {
  font-size: clamp(6.4rem, 8.8025889968vw + 3.0990291262rem, 25.2815533981rem);
  font-weight: 400;
  line-height: 1;
  margin: 0;
  color: var(--clr-text-primary);
  letter-spacing: -0.03em;
  font-family: var(--family-bebas), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.comm-page__search {
  margin-left: auto;
}
.comm-page__tag-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  padding: 4px 10px;
  background: var(--clr-gray-100);
  border-radius: 999px;
  font-size: clamp(12px, 1.3vw, 13px);
  color: var(--clr-text-secondary);
}
.comm-page__tag-filter-label {
  font-weight: 500;
}
.comm-page__tag-filter-clear {
  margin-left: 4px;
  padding: 0 4px;
  color: var(--clr-text-secondary);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
}
.comm-page__tag-filter-clear:hover {
  color: var(--clr-text-primary);
}
.comm-page__divider {
  width: 100%;
  height: 1px;
  background: var(--clr-gray-900);
  max-width: 1200px;
  margin: 0 auto;
}
.comm-page__container {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  column-gap: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 5.4213592233rem);
  align-items: start;
  max-width: 164rem;
  margin: 0 auto;
  border-top: 1px solid var(--clr-gray-900);
  padding-top: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
  min-width: 0;
}
@media (max-width: 1024px) {
  .comm-page__container {
    grid-template-columns: 260px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    row-gap: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
  }
  .comm-page__container .comm-page__sidebar {
    grid-column: 1;
    grid-row: 1/-1;
  }
  .comm-page__container .comm-page__aside {
    grid-column: 2;
    grid-row: 1;
  }
  .comm-page__container .comm-page__main {
    grid-column: 2;
    grid-row: 2;
  }
}
@media (max-width: 768px) {
  .comm-page__container {
    grid-template-columns: 1fr;
    grid-template-rows: unset;
    column-gap: 0;
    row-gap: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 5.4213592233rem);
  }
  .comm-page__container .comm-page__sidebar {
    grid-column: unset;
    grid-row: unset;
  }
  .comm-page__container .comm-page__aside {
    grid-column: unset;
    grid-row: unset;
  }
  .comm-page__container .comm-page__main {
    grid-column: unset;
    grid-row: unset;
  }
}
.comm-page__sidebar {
  min-width: 0;
  position: sticky;
  top: calc(var(--header-height) + clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.6660194175rem));
}
.comm-page__main {
  min-width: 0;
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}
.comm-page__main::before, .comm-page__main::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--clr-gray-900);
  pointer-events: none;
}
.comm-page__main::before {
  left: clamp(-3.2rem, -1.4239482201vw + -2.6660194175rem, -6.254368932rem);
}
.comm-page__main::after {
  right: clamp(-3.2rem, -1.4239482201vw + -2.6660194175rem, -6.254368932rem);
}
@media (max-width: 1024px) {
  .comm-page__main::after {
    display: none;
  }
}
@media (max-width: 768px) {
  .comm-page__main::before {
    display: none;
  }
}
.comm-page__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
  gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  padding-top: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
}
@media (max-width: 768px) {
  .comm-page__section-header {
    flex-direction: column;
    align-items: stretch;
  }
}
.comm-page__section-head {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
}
.comm-page__section-title {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  margin: 0;
  color: var(--clr-text-primary);
  letter-spacing: -0.01em;
}
.comm-page__section-actions {
  display: flex;
  align-items: center;
}
.comm-page__sort-wrap {
  width: max-content;
}
.comm-page__sort {
  padding: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem) 0;
  border: 1px solid var(--clr-gray-200, #e0e0e0);
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
  font-size: clamp(13px, 1.5vw, 14px);
  font-family: inherit;
  cursor: pointer;
  border-radius: 0;
  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='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 0.15s ease;
}
.comm-page__sort:focus {
  outline: none;
  border-color: var(--clr-gray-300, #ddd);
}
.comm-page__sort-wrap .choices__inner {
  min-height: 32px;
  width: 100%;
  padding: 0.6rem 1rem;
  font-size: 1.4rem;
  font-family: inherit;
  color: var(--clr-text-primary);
  background: var(--clr-base-white);
  border: 1px solid var(--clr-gray-200, #e0e0e0);
  border-radius: 0;
  transition: border-color 0.15s ease;
}
.comm-page__sort-wrap .choices[data-type*=select-one] .choices__inner {
  padding: 4px 12px 4px 6px;
}
.comm-page__sort-wrap .choices[data-type*=select-one] .choices__inner:hover {
  background: var(--clr-gray-50, #f2f2f2);
  border-color: var(--clr-gray-300, #ddd);
}
.comm-page__sort-wrap .choices[data-type*=select-one] .choices__inner:focus-visible {
  outline: 2px solid var(--clr-text-primary);
  outline-offset: 2px;
}
.comm-page__sort-wrap .choices:focus-within .choices__inner {
  border-color: var(--clr-text-primary);
  box-shadow: none;
  outline: none;
}
.comm-page__sort-wrap .choices__arrow {
  margin-right: 0;
}
.comm-page__sort-wrap .choices__list--single {
  overflow: visible;
}
.comm-page__sort-wrap .choices__list--single .choices__item--selectable {
  max-width: none;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
}
.comm-page__sort-wrap .choices__list--dropdown {
  min-width: 180px !important;
  width: max-content !important;
  max-width: 280px;
  border-radius: 0;
  border: 1px solid var(--clr-gray-200, #e0e0e0);
  background: var(--clr-base-white);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  z-index: 2;
  max-height: 240px;
}
.comm-page__sort-wrap .choices__list--dropdown .choices__item {
  padding: 8px 12px;
  font-size: 13px;
  white-space: nowrap;
  overflow: visible;
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
  border-left: 3px solid transparent;
  transition: border-color 0.15s ease;
}
.comm-page__sort-wrap .choices__list--dropdown .choices__item--choice:hover, .comm-page__sort-wrap .choices__list--dropdown .choices__item--choice.is-highlighted {
  background: var(--clr-gray-50);
  color: var(--clr-text-primary);
}
.comm-page__sort-wrap .choices__list--dropdown .choices__item--choice.is-selected {
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
  border-left-color: var(--clr-text-primary);
}
.comm-page__sort-wrap .choices__list--dropdown .choices__item--choice.is-selected:hover, .comm-page__sort-wrap .choices__list--dropdown .choices__item--choice.is-selected.is-highlighted {
  background: var(--clr-base-white) !important;
  border-left-color: var(--clr-text-primary);
}
.comm-page__create-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--clr-gray-200, #e0e0e0);
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.comm-page__create-btn i {
  font-size: 0.9em;
}
.comm-page__create-btn:hover {
  background: var(--clr-gray-50, #f2f2f2);
  border-color: var(--clr-gray-300, #ddd);
}
.comm-page__create-btn:focus-visible {
  outline: 2px solid var(--clr-text-primary);
  outline-offset: 2px;
}
.comm-page__posts {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.comm-page__aside {
  min-width: 0;
  position: sticky;
  top: calc(var(--header-height) + clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.6660194175rem));
}

.comm-post {
  position: relative;
  padding: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem) 0;
  border-bottom: 1px solid var(--clr-gray-300);
}
.comm-post:last-child {
  border-bottom: none;
}

.comm-post__link {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.comm-post__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
}
.comm-post__author {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2776699029rem);
  flex: 1;
}
.comm-post__avatar {
  flex-shrink: 0;
  width: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 5.1106796117rem);
  height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 5.1106796117rem);
  border-radius: 50%;
  overflow: hidden;
  background: var(--clr-gray-200);
  border: 1px solid var(--clr-gray-900);
}
.comm-post__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comm-post__avatar-placeholder {
  width: 100%;
  height: 100%;
  background: var(--clr-gray-300);
}
.comm-post__author-info {
  flex: 1;
  min-width: 0;
}
.comm-post__author-name {
  font-size: clamp(14px, 1.5vw, 15px);
  font-weight: 600;
  color: var(--clr-text-primary);
  margin-bottom: 2px;
}
.comm-post__meta {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  font-size: clamp(12px, 1.3vw, 13px);
  color: var(--clr-text-secondary);
}
.comm-post__date::after {
  content: "·";
  margin-left: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
}
.comm-post__more-wrap {
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}
.comm-post__more {
  padding: 4px;
  border: none;
  background: transparent;
  color: var(--clr-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}
.comm-post__more:hover {
  color: var(--clr-text-primary);
}
.comm-post__more i {
  font-size: 18px;
}
.comm-post__more-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  min-width: 160px;
  padding: 4px 0;
  background: var(--clr-base-white);
  border: 1px solid var(--clr-gray-200);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  display: none;
  z-index: 10;
}
.comm-post__more-menu.is-open {
  display: block;
}
.comm-post__more-item {
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: clamp(12px, 1.3vw, 13px);
  cursor: pointer;
}
.comm-post__more-item:hover {
  background: var(--clr-gray-50);
}
.comm-post__more-item.--own-post, .comm-post__more-item:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  color: var(--clr-text-secondary, #6b7280);
}
.comm-post__more-item.--own-post:hover, .comm-post__more-item:disabled:hover {
  background: transparent;
}
.comm-post__body {
  display: flex;
  gap: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  margin-bottom: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
}
.comm-post__main {
  flex: 1;
  min-width: 0;
}
.comm-post__title {
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 600;
  margin: 0 0 clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  line-height: 1.4;
}
.comm-post__title a {
  color: var(--clr-text-primary);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.comm-post__title a:hover {
  opacity: 0.7;
}
.comm-post__content {
  margin: 0;
}
.comm-post__text {
  font-size: clamp(14px, 1.5vw, 15px);
  color: var(--clr-text-primary);
  line-height: 1.6;
  margin: 0;
}
.comm-post__text i {
  color: var(--clr-error, #f1416c);
}
.comm-post__thumb {
  flex-shrink: 0;
  width: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 13.5533980583rem);
  height: clamp(8rem, 2.5889967638vw + 7.0291262136rem, 13.5533980583rem);
  overflow: hidden;
  background: var(--clr-gray-100);
}
.comm-post__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comm-post__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comm-post__stats {
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
}
.comm-post__stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(12px, 1.3vw, 13px);
  color: var(--clr-text-secondary);
}
.comm-post__stat i {
  font-size: 14px;
}

.comm-aside {
  display: flex;
  flex-direction: column;
  gap: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 5.4213592233rem);
}
.comm-aside__section {
  width: 100%;
}
.comm-aside__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
}
.comm-aside__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 600;
  margin: 0;
  color: var(--clr-text-primary);
  letter-spacing: -0.01em;
}
.comm-aside__title i {
  font-size: 16px;
}
.comm-aside__tag-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.comm-aside__tag-nav-btn {
  padding: 4px;
  border: none;
  background: transparent;
  color: var(--clr-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
}
.comm-aside__tag-nav-btn:hover {
  color: var(--clr-text-primary);
}
.comm-aside__tag-nav-btn i {
  font-size: 14px;
}
.comm-aside__pinned {
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
}
.comm-aside__pinned-item {
  display: flex;
  gap: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2776699029rem);
  padding: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem) 0;
  border-bottom: 1px solid var(--clr-gray-200);
}
.comm-aside__pinned-item:last-child {
  border-bottom: none;
}
.comm-aside__pinned-image {
  flex-shrink: 0;
  width: clamp(6rem, 1.2944983819vw + 5.5145631068rem, 8.7766990291rem);
  height: clamp(6rem, 1.2944983819vw + 5.5145631068rem, 8.7766990291rem);
  overflow: hidden;
  background: var(--clr-gray-100);
}
.comm-aside__pinned-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comm-aside__pinned-image-placeholder {
  width: clamp(6rem, 1.2944983819vw + 5.5145631068rem, 8.7766990291rem);
  height: clamp(6rem, 1.2944983819vw + 5.5145631068rem, 8.7766990291rem);
  background: var(--clr-gray-200);
  border: 1px solid var(--clr-gray-900);
}
.comm-aside__pinned-content {
  flex: 1;
  min-width: 0;
}
.comm-aside__pinned-title {
  font-size: clamp(13px, 1.5vw, 14px);
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--clr-text-primary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.comm-aside__pinned-author {
  font-size: clamp(12px, 1.3vw, 13px);
  color: var(--clr-text-secondary);
  margin: 0;
}
.comm-aside__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem);
  margin-top: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
}
.comm-aside__tag {
  display: inline-flex;
  align-items: center;
  padding: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8776699029rem) clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2776699029rem);
  border: 1px solid transparent;
  background: var(--clr-gray-50);
  color: var(--clr-text-primary);
  font-size: clamp(12px, 1.3vw, 13px);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border-radius: 0;
}
.comm-aside__tag:hover {
  background: var(--clr-gray-50);
  color: var(--clr-text-primary);
  border-color: #000;
}
.comm-aside__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem) 0;
  font-size: clamp(13px, 1.4vw, 14px);
  font-weight: 500;
  color: var(--clr-text-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.comm-aside__link:hover {
  color: var(--clr-text-secondary);
}
.comm-aside__link i {
  font-size: 14px;
}

.exclusive-pinned {
  padding: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem) 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  margin-bottom: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
}

.exclusive-pinned-swiper {
  width: 100%;
}
.exclusive-pinned-swiper .swiper-wrapper {
  align-items: stretch;
}
.exclusive-pinned-swiper .swiper-slide {
  height: auto;
}

.exclusive-pinned__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.exclusive-pinned__item {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
}

.exclusive-pinned__thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background: var(--clr-gray-100);
}
.exclusive-pinned__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.exclusive-pinned__content {
  flex: 1;
  min-width: 0;
}

.exclusive-pinned__title {
  font-size: clamp(13px, 1.5vw, 14px);
  font-weight: 500;
  margin: 0 0 4px;
  color: var(--clr-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exclusive-pinned__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(11px, 1.3vw, 12px);
  color: var(--clr-text-secondary);
}

.exclusive-pinned__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--clr-text-primary);
  color: var(--clr-base-white);
}
.exclusive-pinned__avatar i {
  font-size: 10px;
}

.exclusive-pinned-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
}
.exclusive-pinned-header__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(13px, 1.5vw, 14px);
  font-weight: 500;
}
.exclusive-pinned-header__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(11px, 1.3vw, 12px);
  color: var(--clr-text-secondary);
  position: relative;
}
.exclusive-pinned-header__nav .swiper-button-prev.swiper-button-lock, .exclusive-pinned-header__nav .swiper-button-next.swiper-button-lock {
  display: inline-flex !important;
  position: static;
  margin: 0;
}
.exclusive-pinned-header__nav .swiper-button-prev.swiper-button-lock::after, .exclusive-pinned-header__nav .swiper-button-next.swiper-button-lock::after {
  content: none;
}
.exclusive-pinned-header__pager {
  min-width: 48px;
  text-align: right;
  position: static;
}
.exclusive-pinned-header__pager.swiper-pagination-lock {
  display: block !important;
}
.exclusive-pinned-header__btn {
  border: none;
  background: transparent;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--clr-text-secondary);
}
.exclusive-pinned-header__btn i {
  font-size: 14px;
}
.exclusive-pinned-header__btn:hover {
  color: var(--clr-text-primary);
}

/* 게시글 없음 placeholder – 흰 배경, 얇은 라인, 텍스트만 */
.comm-empty-area {
  margin: 0 0 clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
  padding: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 5.4213592233rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  background: var(--clr-base-white, #fff);
  border-top: 1px solid var(--clr-gray-200, #e5e5e5);
}

.comm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0;
  text-align: center;
}

.comm-empty__text {
  margin: 0;
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  line-height: 1.5;
  font-weight: 400;
  color: var(--clr-text-secondary, #666);
}

.comm-empty__cta {
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-text-primary, #111);
  text-decoration: none;
  padding: 0.5rem 0;
  border: none;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  transition: opacity 0.2s;
}
.comm-empty__cta:hover {
  opacity: 0.7;
}

/* 로드 실패 시 (게시글 없음과 구분: 에러 문구 + 다시 시도 버튼) */
.comm-empty-area--error .comm-empty__text {
  color: var(--clr-text-primary, #111);
  font-weight: 500;
}

.comm-empty__retry {
  margin-top: 0.25rem;
  padding: 0.5rem 1rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--clr-base-white, #fff);
  background: var(--clr-text-primary, #111);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.comm-empty__retry:hover {
  opacity: 0.85;
}

/* JS로 주입되는 빈 목록 메시지 (PostList 등) – 동일 스타일 */
.comm-page__posts .profile-page__empty {
  margin: 0;
  padding: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 5.4213592233rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  background: var(--clr-base-white, #fff);
  border: none;
  border-top: 1px solid var(--clr-gray-200, #e5e5e5);
  color: var(--clr-text-secondary, #666);
  font-size: clamp(0.9375rem, 1.2vw, 1rem);
  font-weight: 400;
  text-align: center;
}

.comm-page__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
}
@media (max-width: 1024px) {
  .comm-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .comm-page__grid {
    grid-template-columns: 1fr;
  }
}

.comm-card {
  display: flex;
  flex-direction: column;
  background: var(--clr-base-white);
  position: relative;
  /* 갤러리 카드 옵션 버튼(···) 우측 상단 */
}
.comm-card .comm-post__more-wrap {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}
.comm-card__image {
  position: relative;
  padding-top: 70%;
  overflow: hidden;
  background: var(--clr-gray-100);
}
.comm-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comm-card__body {
  padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.comm-card__title {
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 600;
  margin: 0;
  color: var(--clr-text-primary);
  line-height: 1.4;
}
.comm-card__title a {
  color: inherit;
  text-decoration: none;
}
.comm-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(12px, 1.4vw, 13px);
  color: var(--clr-text-secondary);
}
.comm-card__stats {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  font-size: clamp(12px, 1.4vw, 13px);
  color: var(--clr-text-secondary);
  margin-top: 4px;
}
.comm-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.comm-card__stat i {
  font-size: 14px;
}
.comm-card--featured {
  min-width: 240px;
  max-width: 320px;
}

.comm-detail {
  max-width: 720px;
  margin: 0 auto;
}
.comm-detail__back {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
}
.comm-detail__back-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comm-detail__back-btn {
  font-size: clamp(12px, 1.3vw, 13px);
  color: var(--clr-text-secondary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}
.comm-detail__back-btn--edit:hover {
  color: var(--clr-text-primary);
}
.comm-detail__back-btn--delete:hover {
  color: var(--clr-error, #c00);
}
.comm-detail__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(12px, 1.3vw, 13px);
  color: var(--clr-text-secondary);
  text-decoration: none;
}
.comm-detail__back-link i {
  font-size: 14px;
}
.comm-detail__header {
  margin-bottom: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
}
.comm-detail__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  margin: 0 0 clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  color: var(--clr-text-primary);
  letter-spacing: -0.02em;
}
.comm-detail__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  font-size: clamp(12px, 1.3vw, 13px);
  color: var(--clr-text-secondary);
}
.comm-detail__meta-left {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
}
.comm-detail__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--clr-text-primary);
  color: var(--clr-base-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.comm-detail__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.comm-detail__meta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.comm-detail__author {
  font-weight: 600;
  color: var(--clr-text-primary);
}
.comm-detail__role {
  display: flex;
  align-items: center;
  gap: 4px;
}
.comm-detail__dot {
  font-size: 10px;
}
.comm-detail__meta-right {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
}
.comm-detail__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.comm-detail__stat i {
  font-size: 14px;
}
.comm-detail__hero {
  margin: 0 0 clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
}
.comm-detail__hero img {
  display: block;
  width: 100%;
  height: auto;
}
.comm-detail__hero-swiper {
  overflow: hidden;
}
.comm-detail__hero-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-gray-100);
  aspect-ratio: 16/10;
  background: #000;
  overflow: hidden;
}
.comm-detail__hero-swiper .swiper-slide img {
  width: auto;
  height: 100%;
  object-fit: contain;
}
.comm-detail__hero-pagination {
  margin-top: 12px;
  position: relative;
}
.comm-detail__hero-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: var(--clr-gray-400);
  opacity: 1;
  transition: background 0.2s;
}
.comm-detail__hero-pagination .swiper-pagination-bullet-active {
  background: var(--clr-gray-900);
}
.comm-detail__body {
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.7;
  color: var(--clr-text-primary);
  margin-bottom: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
}
.comm-detail__body p {
  margin: 0 0 1em;
}
.comm-detail__reactions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  margin-bottom: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
}
.comm-detail__reactions-label {
  font-size: clamp(13px, 1.4vw, 14px);
  color: var(--clr-text-secondary);
  margin-right: 4px;
}
.comm-detail__reactions-list {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comm-detail__reaction-btn, .comm-detail__reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  padding: 5px 10px;
  border: 1px solid var(--clr-border, #e5e5e5);
  border-radius: 999px;
  background: var(--clr-base-white, #fff);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.comm-detail__reaction-btn:hover:not(:disabled), .comm-detail__reaction-pill:hover:not(:disabled) {
  border-color: var(--clr-text-secondary);
  background: var(--clr-bg-secondary, #f5f5f5);
}
.comm-detail__reaction-btn.is-active, .comm-detail__reaction-pill.is-active {
  border-color: var(--clr-primary, #333);
  background: rgba(0, 0, 0, 0.05);
}
.comm-detail__reaction-btn:disabled, .comm-detail__reaction-pill:disabled {
  opacity: 0.7;
  cursor: wait;
}
.comm-detail__reaction-pill.is-hidden {
  display: none !important;
}
.comm-detail__reaction-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--clr-border, #e5e5e5);
  border-radius: 50%;
  background: var(--clr-base-white, #fff);
  color: var(--clr-text-secondary);
  cursor: pointer;
  font-size: 1.25rem;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
}
.comm-detail__reaction-add i {
  font-size: 1.15em;
}
.comm-detail__reaction-add:hover {
  border-color: var(--clr-text-secondary);
  background: var(--clr-bg-secondary, #f5f5f5);
  color: var(--clr-text-primary);
  transform: scale(1.05);
}
.comm-detail__reaction-add:focus-visible {
  outline: 2px solid var(--clr-primary, #333);
  outline-offset: 2px;
}
.comm-detail__reactions {
  position: relative;
}
.comm-detail__reaction-picker {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 14px;
  background: var(--clr-base-white, #fff);
  border: 1px solid var(--clr-border, #e5e5e5);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  z-index: 10;
}
.comm-detail__reaction-picker.is-hidden {
  display: none !important;
}
.comm-detail__reaction-picker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 2.25rem;
  cursor: pointer;
  transition: background 0.2s;
}
.comm-detail__reaction-picker-btn:hover {
  background: var(--clr-bg-secondary, #f5f5f5);
}
.comm-detail__reaction-emoji {
  line-height: 1;
  font-size: 2.25rem;
}
.comm-detail__reaction-count {
  font-size: 12px;
  color: var(--clr-text-secondary);
}
.comm-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem);
  margin-bottom: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
}
.comm-detail__tag {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--clr-gray-900);
  font-size: clamp(12px, 1.3vw, 13px);
  text-decoration: none;
  color: var(--clr-text-primary);
}

.comm-create {
  max-width: min(920px, 100%);
  margin: 0 auto;
}
.comm-create__header {
  margin-bottom: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
}
.comm-create__title {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.comm-create__subtitle {
  margin: 0;
  font-size: clamp(13px, 1.4vw, 14px);
  color: var(--clr-text-secondary);
}
.comm-create__form {
  display: flex;
  flex-direction: column;
  gap: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 5.4213592233rem);
}
.comm-create__tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--clr-gray-200, #e0e0e0);
  margin: 0 0 clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
}
.comm-create__tab {
  padding: 10px 16px 12px;
  border: none;
  background: transparent;
  font-size: clamp(13px, 1.4vw, 14px);
  font-weight: 500;
  color: var(--clr-text-secondary);
  cursor: pointer;
  font-family: inherit;
  position: relative;
  margin-bottom: -1px;
  transition: color 0.15s ease;
}
.comm-create__tab:hover {
  color: var(--clr-text-primary);
}
.comm-create__tab.is-active {
  color: var(--clr-text-primary);
  font-weight: 600;
}
.comm-create__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--clr-text-primary);
}
.comm-create__panel {
  display: none;
}
.comm-create__panel.is-active {
  display: block;
}
.comm-create__panel > .comm-create__field {
  margin-bottom: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
}
.comm-create__panel > .comm-create__field:last-child {
  margin-bottom: 0;
}
.comm-create__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
}
.comm-create__field:last-child {
  margin-bottom: 0;
}
.comm-create__label {
  font-size: clamp(13px, 1.4vw, 14px);
  font-weight: 500;
}
.comm-create__board-name {
  margin: 0;
  font-size: clamp(13px, 1.4vw, 14px);
  color: var(--clr-text-primary);
  font-weight: 500;
}
.comm-create__input, .comm-create__textarea, .comm-create__select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #1a1a1a;
  font-family: inherit;
  font-size: clamp(13px, 1.4vw, 14px);
  background: var(--clr-base-white);
  border-radius: 0;
}
.comm-create__textarea {
  min-height: 220px;
  resize: vertical;
}
.comm-create .ql-toolbar.ql-snow,
.comm-create .ql-container.ql-snow {
  border: 1px solid #000;
  border-radius: 0;
}
.comm-create .ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 1px solid #000;
}
.comm-create__editor {
  min-height: 200px;
  background: var(--clr-base-white);
  border: 1px solid #000;
  outline-offset: 0;
  border-radius: 0;
}
.comm-create__field .choices__inner {
  min-height: 42px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: clamp(13px, 1.4vw, 14px);
  color: var(--clr-text-primary);
  background: var(--clr-base-white);
  border: 1px solid #1a1a1a !important;
  border-radius: 0;
}
.comm-create__field .choices[data-type*=select-one] .choices__inner {
  padding: 10px 32px 10px 12px;
}
.comm-create__field .choices:focus-within .choices__inner {
  border-color: #1a1a1a !important;
  box-shadow: none;
  outline: none;
}
.comm-create__field .choices__list--dropdown {
  border: 1px solid #1a1a1a !important;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.comm-create__file {
  width: 100%;
  font-size: clamp(12px, 1.3vw, 13px);
}
.comm-create__disclaimer {
  margin: 0 0 1rem;
  font-size: clamp(11px, 1.2vw, 12px);
  color: var(--clr-text-secondary);
  line-height: 1.5;
}
.comm-create__hint {
  margin: 0;
  font-size: clamp(11px, 1.2vw, 12px);
  color: var(--clr-text-secondary);
}
.comm-create__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.comm-create__cancel {
  padding: 6px 14px;
  border: 1px solid var(--clr-gray-900);
  background: transparent;
  font-size: clamp(13px, 1.4vw, 14px);
  cursor: pointer;
  border-radius: 0;
}
.comm-create__submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: 1px solid var(--clr-gray-900);
  background: var(--clr-text-primary);
  color: var(--clr-base-white);
  font-size: clamp(13px, 1.4vw, 14px);
  cursor: pointer;
  border-radius: 0;
}
.comm-create__submit i {
  font-size: 14px;
}
.comm-create__dropzone, .comm-create__thumb-dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: 16px;
  border: 2px dashed #1a1a1a;
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.comm-create__dropzone:hover, .comm-create__thumb-dropzone:hover {
  border-color: #1a1a1a;
  background: var(--clr-gray-50, #f9f9f9);
}
.comm-create__dropzone input[type=file], .comm-create__thumb-dropzone input[type=file] {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}
.comm-create__thumb-preview {
  margin-top: 8px;
}
.comm-create__media-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.comm-create__tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}
.comm-create .admin-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.comm-create .admin-checkbox__box {
  border-color: #1a1a1a !important;
}
.comm-create .admin-checkbox__box::after {
  width: 4px !important;
  height: 6px !important;
  border-width: 0 1.5px 1.5px 0 !important;
}
.comm-create__thumb-dropzone {
  gap: 0.5rem;
}
.comm-create__thumb-dropzone .comm-create__thumb-dropzone-icon {
  font-size: 1.5rem;
  color: var(--clr-text-secondary);
}

.comm-guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
}
.comm-guide-list__item {
  padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem) clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  background: var(--clr-gray-100, #f5f5f5);
  border-left: 3px solid var(--clr-text-primary);
  font-size: clamp(13px, 1.4vw, 14px);
  line-height: 1.5;
  color: var(--clr-text-primary);
}

.comm-comments {
  max-width: 720px;
  margin: 0 auto clamp(4rem, 1.2944983819vw + 3.5145631068rem, 6.7766990291rem);
  padding-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  background: var(--clr-base-white, #fff);
  color: var(--clr-text-primary, #0f0f0f);
}
.comm-comments__title {
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 600;
  margin: 0 0 clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
}
.comm-comments__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}
.comm-comments__count {
  font-size: clamp(13px, 1.4vw, 14px);
  color: var(--clr-text-secondary, #606060);
}
.comm-comments__sort-wrap {
  margin-left: auto;
  position: relative;
}
.comm-comments__sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  font-size: clamp(13px, 1.4vw, 14px);
  color: var(--clr-text-primary, #0f0f0f);
  cursor: pointer;
}
.comm-comments__sort-btn:hover {
  background: var(--clr-gray-100, #f2f2f2);
}
.comm-comments__sort-btn i {
  font-size: 16px;
  color: var(--clr-text-secondary, #606060);
}
.comm-comments__sort-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  min-width: 140px;
  padding: 4px 0;
  background: var(--clr-base-white, #fff);
  border: 1px solid var(--clr-gray-200, #e5e5e5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 20;
}
.comm-comments__sort-dropdown.is-open {
  display: block;
}
.comm-comments__sort-option {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  font-size: clamp(13px, 1.4vw, 14px);
  color: var(--clr-text-primary, #0f0f0f);
  text-align: left;
  cursor: pointer;
}
.comm-comments__sort-option:hover {
  background: var(--clr-gray-100, #f2f2f2);
}
.comm-comments__inline-reply {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding-top: 8px;
}
.comm-comments__inline-reply-avatar {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--clr-gray-400, #909090);
  color: var(--clr-base-white, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}
.comm-comments__inline-reply-form-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comm-comments__inline-reply-input {
  width: 100%;
  padding: 8px 0;
  border: none;
  border-bottom: 1px solid var(--clr-gray-200, #e5e5e5);
  font-family: inherit;
  font-size: clamp(13px, 1.4vw, 14px);
  color: var(--clr-text-primary, #0f0f0f);
  background: transparent;
}
.comm-comments__inline-reply-input::placeholder {
  color: var(--clr-text-secondary, #606060);
}
.comm-comments__inline-reply-input:focus {
  outline: none;
  border-bottom-color: var(--clr-gray-900, #0f0f0f);
}
.comm-comments__inline-reply-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.comm-comments__inline-reply-cancel {
  padding: 6px 12px;
  border: none;
  background: transparent;
  font-size: clamp(13px, 1.4vw, 14px);
  color: var(--clr-text-secondary, #606060);
  cursor: pointer;
}
.comm-comments__inline-reply-cancel:hover {
  color: var(--clr-text-primary, #0f0f0f);
}
.comm-comments__inline-reply-submit {
  padding: 6px 14px;
  border: none;
  background: var(--clr-gray-900, #0f0f0f);
  color: var(--clr-base-white, #fff);
  font-size: clamp(13px, 1.4vw, 14px);
  font-weight: 500;
  cursor: pointer;
}
.comm-comments__inline-reply-submit:hover:not(:disabled) {
  background: var(--clr-gray-700, #303030);
}
.comm-comments__inline-reply-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.comm-comments__form {
  margin-bottom: clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.5553398058rem);
}
.comm-comments__input {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border: 1px solid var(--clr-gray-900);
  resize: vertical;
  font-family: inherit;
  font-size: clamp(13px, 1.4vw, 14px);
}
.comm-comments__form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.comm-comments__submit {
  padding: 6px 14px;
  border: 1px solid var(--clr-gray-900);
  background: transparent;
  font-size: clamp(13px, 1.4vw, 14px);
  cursor: pointer;
}
.comm-comments__list {
  list-style: none;
  margin: 0;
  padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem) 0 0;
  border-top: 1px solid var(--clr-gray-200, #e5e5e5);
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}
.comm-comments__empty {
  list-style: none;
  margin: 0;
  padding: clamp(3.2rem, 1.5533980583vw + 2.6174757282rem, 6.532038835rem) clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  text-align: center;
}
.comm-comments__empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.comm-comments__empty-icon {
  font-size: 48px;
  color: var(--clr-gray-300);
  line-height: 1;
}
.comm-comments__empty-title {
  margin: 0;
  font-size: clamp(15px, 1.6vw, 16px);
  font-weight: 600;
  color: var(--clr-text-primary);
}
.comm-comments__empty-sub {
  margin: 0;
  font-size: clamp(13px, 1.4vw, 14px);
  color: var(--clr-text-secondary);
}
.comm-comments__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.comm-comments__item--reply {
  margin-top: 4px;
  padding-left: 0;
}
.comm-comments__item--reply .comm-comments__avatar {
  width: 24px;
  height: 24px;
  font-size: 11px;
}
.comm-comments__item--reply .comm-comments__text {
  font-size: clamp(12px, 1.3vw, 13px);
}
.comm-comments__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--clr-gray-400, #909090);
  color: var(--clr-base-white, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.comm-comments__content {
  flex: 1;
  min-width: 0;
  position: relative;
}
.comm-comments__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.comm-comments__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(12px, 1.3vw, 13px);
}
.comm-comments__author {
  font-weight: 600;
}
.comm-comments__time {
  color: var(--clr-text-secondary);
}
.comm-comments__text {
  margin: 0;
  font-size: clamp(13px, 1.4vw, 14px);
  color: var(--clr-text-primary);
}
.comm-comments__dot {
  font-size: 10px;
}
.comm-comments__more-wrap {
  position: relative;
  flex-shrink: 0;
}
.comm-comments__more-btn, .comm-comments__more-button {
  border: none;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  color: var(--clr-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.comm-comments__more-btn:hover, .comm-comments__more-button:hover {
  color: var(--clr-text-primary);
}
.comm-comments__more-btn i, .comm-comments__more-button i {
  font-size: 16px;
}
.comm-comments__more {
  flex-shrink: 0;
}
.comm-comments__more-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  min-width: 160px;
  padding: 4px 0;
  background: var(--clr-base-white);
  border: 1px solid var(--clr-gray-200);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  display: none;
  z-index: 10;
}
.comm-comments__more-menu.is-open {
  display: block;
}
.comm-comments__more-item {
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: clamp(12px, 1.3vw, 13px);
  cursor: pointer;
}
.comm-comments__more-item:hover {
  background: var(--clr-gray-50);
}
.comm-comments__more-item.--own-post, .comm-comments__more-item:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  color: var(--clr-text-secondary, #6b7280);
}
.comm-comments__more-item.--own-post:hover, .comm-comments__more-item:disabled:hover {
  background: transparent;
}
.comm-comments__actions {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.comm-comments__reply-btn, .comm-comments__edit-btn, .comm-comments__delete-btn {
  padding: 0 2px;
  border: none;
  background: transparent;
  font-size: clamp(12px, 1.3vw, 13px);
  color: var(--clr-text-secondary);
  cursor: pointer;
}
.comm-comments__reply-btn:hover, .comm-comments__edit-btn:hover, .comm-comments__delete-btn:hover {
  color: var(--clr-text-primary);
  text-decoration: underline;
}
.comm-comments__edit-wrap {
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comm-comments__edit-input {
  width: 100%;
  padding: 8px 10px;
  font-size: clamp(13px, 1.4vw, 14px);
  border: 1px solid var(--clr-gray-200);
  border-radius: 4px;
}
.comm-comments__edit-actions {
  display: flex;
  gap: 8px;
}
.comm-comments__edit-save, .comm-comments__edit-cancel {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--clr-gray-200);
  background: var(--clr-base-white);
  color: var(--clr-text-primary);
}
.comm-comments__edit-save:hover, .comm-comments__edit-cancel:hover {
  background: var(--clr-gray-50);
}
.comm-comments__edit-save[disabled], .comm-comments__edit-cancel[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.comm-comments__reactions {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.comm-comments__reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border: 1px solid var(--clr-gray-200);
  border-radius: 999px;
  background: var(--clr-base-white);
  font-size: 11px;
  cursor: pointer;
  color: var(--clr-text-primary);
}
.comm-comments__reaction-pill:hover {
  border-color: var(--clr-gray-400);
  background: var(--clr-gray-50);
}
.comm-comments__reaction-count {
  font-weight: 600;
  color: var(--clr-text-secondary);
}
.comm-comments__reaction-trigger {
  border: none;
  background: transparent;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--clr-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.comm-comments__reaction-trigger i {
  font-size: 14px;
}
.comm-comments__reaction-picker {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 6px;
  padding: 10px 12px;
  background: var(--clr-base-white);
  border-radius: 0;
  border: 1px solid var(--clr-gray-200);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 15;
}
.comm-comments__reaction-picker.is-open {
  display: flex;
}
.comm-comments__reaction-emoji {
  border: none;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  font-size: 34px;
  line-height: 1;
}
.comm-comments__reaction-emoji:hover {
  transform: scale(1.1);
}
.comm-comments__replies-wrap--collapsed .comm-comments__replies {
  display: none !important;
}
.comm-comments__replies {
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 1px solid var(--clr-gray-200);
}
.comm-comments__replies-toggle {
  margin-top: 6px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: clamp(12px, 1.3vw, 13px);
  color: var(--clr-text-secondary);
  display: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.comm-comments__replies-toggle::after {
  content: "▾";
  font-size: 10px;
}
@media (max-width: 768px) {
  .comm-comments__replies {
    display: none;
  }
  .comm-comments__replies-toggle::after {
    content: "›";
  }
}
.comm-comments__modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}
.comm-comments__modal.is-open {
  display: flex;
}
.comm-comments__modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.comm-comments__modal-dialog {
  position: relative;
  width: 100%;
  max-width: min(920px, 94vw);
  max-height: 88vh;
  background: var(--clr-base-white);
  border-radius: 12px 12px 0 0;
  padding: 20px;
  overflow: auto;
}
.comm-comments__modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.comm-comments__modal-title {
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 600;
}
.comm-comments__modal-close {
  border: none;
  background: transparent;
  padding: 4px;
  cursor: pointer;
}
.comm-comments__modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.comm-comments__composer {
  margin-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
}
.comm-comments__composer-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.comm-comments__composer-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.comm-comments__composer-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--clr-gray-400, #909090);
  color: var(--clr-base-white, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}
.comm-comments__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.comm-comments__composer-field {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid transparent;
  font-family: inherit;
  font-size: clamp(14px, 1.5vw, 15px);
  color: var(--clr-text-primary, #0f0f0f);
  background: transparent;
}
.comm-comments__composer-field::placeholder {
  color: var(--clr-text-secondary, #606060);
}
.comm-comments__composer-field:focus {
  outline: none;
  border-bottom-color: var(--clr-gray-300, #ccc);
}
.comm-comments__composer-send {
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 8px;
  cursor: pointer;
  color: var(--clr-text-secondary, #606060);
}
.comm-comments__composer-send:hover {
  color: var(--clr-text-primary, #0f0f0f);
}
.comm-comments__composer-send i {
  font-size: 20px;
}

.comm-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.comm-locked__back {
  width: 100%;
  max-width: 720px;
  margin: 0 auto clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
}
.comm-locked__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(12px, 1.3vw, 13px);
  color: var(--clr-text-secondary);
  text-decoration: none;
}
.comm-locked__body {
  text-align: center;
}
.comm-locked__icon {
  font-size: 32px;
  margin-bottom: 12px;
}
.comm-locked__text {
  font-size: clamp(14px, 1.6vw, 16px);
  margin-bottom: 16px;
}
.comm-locked__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border: 1px solid var(--clr-gray-900);
  background: transparent;
  color: var(--clr-text-primary);
  font-size: clamp(13px, 1.4vw, 14px);
  text-decoration: none;
}

.comm-page__panel {
  background: var(--clr-base-white);
}

.comm-page__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem) clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  border-bottom: 1px solid var(--clr-gray-200);
}

.comm-page__panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(14px, 1.5vw, 15px);
}

.comm-page__panel-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(12px, 1.4vw, 13px);
  color: var(--clr-text-secondary);
}
.comm-page__panel-nav button {
  border: none;
  background: transparent;
  padding: 2px 4px;
  cursor: pointer;
  color: inherit;
}

.comm-page__panel-body {
  padding: 0 clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem) clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
}

.comm-list-loader-wrap,
.comm-list-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: clamp(4.8rem, 1.0355987055vw + 4.4116504854rem, 7.0213592233rem);
  color: var(--clr-text-secondary);
  font-size: 15px;
}
.comm-list-loader-wrap i,
.comm-list-loader i {
  font-size: 1.5rem;
}

.no-main-page {
  padding: 0;
  margin: 0;
  overflow-x: clip;
}

.no-main {
  position: relative;
}

.no-main__section {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
  padding-top: var(--header-height);
  padding-right: max(clamp(4.8rem, 7.7669902913vw + 1.8873786408rem, 21.4601941748rem), env(safe-area-inset-right, 0px));
  padding-bottom: max(clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 7.6427184466rem), env(safe-area-inset-bottom, 0px));
  padding-left: max(clamp(4.8rem, 7.7669902913vw + 1.8873786408rem, 21.4601941748rem), env(safe-area-inset-left, 0px));
  overflow: hidden;
  color: var(--clr-base-white);
}

.no-main__section--footer {
  height: auto;
  min-height: 0;
  align-items: stretch;
  justify-content: flex-start;
  overflow: visible;
  padding: 0;
}

.no-main__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.no-main__background::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(7, 26, 55, 0.5);
  mix-blend-mode: multiply;
}
.no-main__background.--overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(7, 26, 55, 0.7);
  mix-blend-mode: multiply;
}

.no-main__media {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.no-main__img,
.no-main__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-main__video {
  pointer-events: none;
}

.no-main__section--bro-cns .no-main__background,
.no-main__section--services .no-main__background,
.no-main__section--team .no-main__background,
.no-main__section--news .no-main__background {
  background: var(--clr-main-section-bg);
}

.no-main__container {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  max-width: 164rem;
  margin: 0 auto;
  display: flex;
}

.no-main__section > .no-main__container {
  flex: 1 1 auto;
  min-width: 0;
}

.no-main__section--align-left .no-main__container {
  justify-content: flex-start;
}

.no-main__section--align-right .no-main__container {
  justify-content: flex-end;
}

.no-main__content {
  width: 100%;
  min-width: 0;
  max-width: min(72rem, 100%);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.9106796117rem);
}
@media (min-width: 768px) {
  .no-main__content {
    width: clamp(32rem, 36vw, 56rem);
    max-width: none;
    aspect-ratio: 1/1;
  }
}
@media (max-width: 768px) {
  .no-main__content {
    padding: 0;
    border: none;
    box-shadow: none;
    background: none;
    backdrop-filter: none;
    padding-right: 3.2rem;
  }
}

.no-main__subtitle {
  margin: 0 0 clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-primary-500);
}

.no-main__title {
  margin: 0 0 clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 28px rgba(0, 0, 0, 0.35);
  text-wrap: balance;
  font-size: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 7.6427184466rem);
}

.no-main__text {
  margin: 0 0 clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  color: var(--clr-main-text-muted);
  text-wrap: pretty;
  word-break: keep-all;
}
.no-main__text strong {
  font-size: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.6330097087rem);
  font-weight: 700;
  display: block;
  padding-bottom: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
}
.no-main__text b {
  font-weight: 500;
}

.no-main__actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
}

.no-main__pager {
  position: fixed;
  top: 50%;
  right: max(clamp(1.6rem, 1.5533980583vw + 1.0174757282rem, 4.932038835rem), env(safe-area-inset-right, 0px));
  z-index: calc(var(--header-z-index, 100) + 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-50%);
  pointer-events: auto;
}
.no-main__pager--hidden {
  display: none;
}
@media (max-width: 768px) {
  .no-main__pager {
    top: auto;
    bottom: 0;
  }
}

.no-main__pager-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.2rem, 0.6472491909vw + 1.9572815534rem, 3.5883495146rem);
}
@media (max-width: 768px) {
  .no-main__pager-dots {
    gap: clamp(1.4rem, 0.5177993528vw + 1.2058252427rem, 2.5106796117rem);
  }
}

.no-main__pager-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.no-main__pager-item--active {
  gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
}

.no-main__pager-label {
  margin: 0;
  width: max-content;
  max-width: min(40vw, 12rem);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2776699029rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--clr-base-white);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  text-align: center;
  pointer-events: none;
  transition: opacity 0.4s ease, max-height 0.55s ease;
}
@media (prefers-reduced-motion: reduce) {
  .no-main__pager-label {
    transition: none;
  }
}

.no-main__pager-item--active .no-main__pager-label {
  max-height: min(40vh, 18rem);
  opacity: 1;
}

.no-main__pager-dot {
  flex-shrink: 0;
  width: clamp(0.7rem, 0.0647249191vw + 0.6757281553rem, 0.8388349515rem);
  height: clamp(0.7rem, 0.0647249191vw + 0.6757281553rem, 0.8388349515rem);
  padding: 0;
  border: 1px solid var(--clr-main-pager-border);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.no-main__pager-dot:hover {
  border-color: var(--clr-main-pager-border-strong);
}
.no-main__pager-dot:hover:not(.no-main__pager-dot--active) {
  transform: scale(1.12);
}
.no-main__pager-dot:focus-visible {
  outline: 2px solid var(--clr-main-focus-ring);
  outline-offset: 3px;
}
.no-main__pager-dot--active {
  background: var(--clr-base-white);
  border-color: var(--clr-base-white);
  transform: scale(1.38);
}
.no-main__pager-dot--active:hover {
  transform: scale(1.42);
}

@keyframes no-main-scroll-hint-spin {
  to {
    transform: rotate(360deg);
  }
}
.no-main__scroll-hint {
  position: absolute;
  bottom: max(clamp(2rem, 1.2944983819vw + 1.5145631068rem, 4.7766990291rem), env(safe-area-inset-bottom, 0px));
  right: max(clamp(2rem, 1.8122977346vw + 1.3203883495rem, 5.8873786408rem), env(safe-area-inset-right, 0px));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(4.8rem, 3.1067961165vw + 3.6349514563rem, 11.4640776699rem);
  height: clamp(4.8rem, 3.1067961165vw + 3.6349514563rem, 11.4640776699rem);
  padding: 0;
  border-radius: 50%;
  background: var(--clr-main-scroll-bg);
  color: var(--clr-base-white);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.no-main__scroll-hint__spin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  animation: no-main-scroll-hint-spin 22s linear infinite;
  will-change: transform;
}
.no-main__scroll-hint__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* SVG 기본 회색 → 히어로 위 밝은 톤 */
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.no-main__scroll-hint i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  width: auto;
  height: auto;
}
.no-main__scroll-hint:hover {
  background: var(--clr-main-scroll-hover-bg);
  border-color: var(--clr-main-scroll-hover-border);
}
.no-main__scroll-hint:focus-visible {
  outline: 2px solid var(--clr-main-focus-ring);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .no-main__scroll-hint__spin {
    animation: none;
  }
}
@media (max-width: 768px) {
  .no-main__scroll-hint {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .no-main__title {
    text-wrap: balance;
  }
  .no-main__text {
    text-wrap: pretty;
  }
}
/* Company page — dark navy / black theme, full-width sections */
.bro-company-main {
  padding: 0;
  margin: 0;
  background: var(--clr-company-shell-bg);
  color: var(--clr-base-white);
}

.bro-company {
  overflow-x: clip;
  /* —— Hero —— (100vh, 텍스트 블록 세로 중앙·좌측 정렬) */
  /* —— Possibility (scroll pin: char fill → bg → copy reveal) —— */
  /* —— Service —— (전체 너비 행 · border-bottom) */
  /* 2×2 그리드 · 상·하 행 구분선 · 모바일 1열 */
  /* —— Project Reference —— (배경 #151C35 · 타임라인 · 우측 페이드) */
  /* —— Portfolio —— */
  /* —— Clients —— */
  /* 풀폭 마퀴 — 컨테이너 밖 (제목/탭만 no-container-xl) */
  /* 원본 컬러 로고 — 카드 안에서 비율 유지 */
  /* —— Contact —— */
  /* 보안코드: &__field input 과 동일 패딩·타이포(고정 height 없음) — stretch 로 이미지/새로고침 높이 정렬 */
  /* —— Location —— 라벨/값 그리드 + 구분선 + 약도 (넓은 화면: 좌 텍스트 / 우 약도) */
}
.bro-company__kicker {
  font-size: clamp(1.1rem, 0.1294498382vw + 1.0514563107rem, 1.3776699029rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-company-text-kicker);
  margin-bottom: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem);
}
.bro-company__section-title {
  font-size: clamp(2.2rem, 1.1650485437vw + 1.7631067961rem, 4.6990291262rem);
  font-weight: 700;
  font-family: var(--family-pretendard);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
.bro-company__hero {
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: var(--header-height) 0 clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 5.732038835rem);
}
.bro-company__hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bro-company__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bro-company__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, var(--clr-company-hero-overlay-1) 0%, var(--clr-company-hero-overlay-2) 55%, var(--clr-company-hero-overlay-3) 100%);
}
.bro-company__hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: left;
}
.bro-company__hero-title {
  font-size: clamp(4rem, 3.2362459547vw + 2.786407767rem, 10.9417475728rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: var(--clr-base-white);
}
.bro-company__hero-lead {
  font-size: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2.2330097087rem);
  line-height: 1.65;
  color: var(--clr-company-text-lead);
  word-break: keep-all;
}
.bro-company__possibility {
  position: relative;
}
.bro-company__possibility-inner {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-company-possibility-bg);
  overflow: hidden;
}
.bro-company__possibility-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
}
.bro-company__possibility-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bro-company__possibility-overlay {
  position: absolute;
  inset: 0;
  background: var(--clr-company-possibility-overlay);
}
.bro-company__possibility-content {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  text-align: center;
  padding-left: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  padding-right: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 0.6472491909vw + 1.1572815534rem, 2.7883495146rem);
}
.bro-company__possibility-title {
  font-size: clamp(2.8rem, 2.3300970874vw + 1.9262135922rem, 7.7980582524rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--clr-base-white);
}
.bro-company__possibility-title .char {
  display: inline-block;
  will-change: color;
}
.bro-company__possibility-copy {
  width: 100%;
  margin: 0 auto;
  font-size: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  line-height: 1.75;
  color: var(--clr-company-possibility-copy);
  word-break: keep-all;
}
.bro-company__service {
  background: var(--clr-gray-50);
  color: var(--clr-company-service-text);
}
.bro-company__service-title {
  color: var(--clr-company-service-heading);
  font-family: var(--family-pretendard);
  font-weight: 700;
  margin-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}
.bro-company__service-rows {
  list-style: none;
  margin: 0;
  padding: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.6660194175rem) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
}
@media (max-width: 1024px) {
  .bro-company__service-rows {
    grid-template-columns: 1fr;
  }
}
.bro-company__service-rows-item {
  min-width: 0;
}
.bro-company__service-block {
  height: 100%;
  box-sizing: border-box;
  padding: clamp(2.2rem, 0.5177993528vw + 2.0058252427rem, 3.3106796117rem);
  border: 1px solid var(--clr-company-service-border);
  border-radius: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem);
  background: var(--clr-company-service-bg);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}
.bro-company__service-block-main {
  display: flex;
  flex-direction: column;
  gap: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.3553398058rem);
  align-items: stretch;
  min-width: 0;
  height: 100%;
}
.bro-company__service-block-head {
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  min-width: 0;
}
.bro-company__service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(6.4rem, 2.3300970874vw + 5.5262135922rem, 11.3980582524rem);
  height: clamp(6.4rem, 2.3300970874vw + 5.5262135922rem, 11.3980582524rem);
  flex-shrink: 0;
  background: var(--clr-company-service-icon-tint);
  border: 1px solid rgba(0, 32, 91, 0.08);
  border-radius: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
}
.bro-company__service-icon lord-icon {
  display: block;
  width: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 9.2427184466rem) !important;
  height: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 9.2427184466rem) !important;
}
.bro-company__service-titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
}
.bro-company__service-sub {
  font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5776699029rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--clr-company-service-sub);
  line-height: 1.35;
}
.bro-company__service-name {
  margin: 0;
  font-size: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--clr-company-service-heading);
  word-break: keep-all;
}
.bro-company__service-lead {
  margin: 0;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  line-height: 1.7;
  color: var(--clr-company-service-body);
  word-break: keep-all;
}
.bro-company__service-detail {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  border-top: 1px solid #d7d7d7;
  padding-top: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  margin-top: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}
@media (max-width: 768px) {
  .bro-company__service-detail {
    grid-template-columns: 1fr;
  }
}
.bro-company__service-detail li {
  margin: 0;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5776699029rem);
  line-height: 1.44;
  color: var(--clr-company-service-detail);
}
.bro-company__service-detail-name {
  display: block;
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8776699029rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--clr-company-service-heading);
}
.bro-company__service-detail-sep {
  display: none;
}
.bro-company__service-detail-desc {
  font-weight: 400;
  color: var(--clr-company-service-body);
}
.bro-company__service-foot {
  margin-top: 0;
  padding-top: clamp(2.8rem, 1.0355987055vw + 2.4116504854rem, 5.0213592233rem);
  text-align: center;
}
.bro-company__service-foot .no-btn--primary {
  border-radius: 0.35rem;
}
.bro-company__service-aside {
  background: var(--clr-company-aside-bg);
  padding: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem);
  border-radius: 0.25rem;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .bro-company__service-aside {
    order: 1;
  }
}
.bro-company__service-aside-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bro-company__service-aside-list li {
  border-bottom: 1px solid var(--clr-company-aside-border);
}
.bro-company__service-aside-list li:last-child {
  border-bottom: none;
}
.bro-company__service-aside-list a {
  display: block;
  padding: 0.85rem 0;
  font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5776699029rem);
  font-weight: 400;
  color: var(--clr-company-service-text);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.15s ease;
}
.bro-company__service-aside-list a:hover {
  color: var(--clr-company-aside-link-hover);
}
.bro-company__project {
  position: relative;
  background: var(--clr-company-project-bg);
  overflow: hidden;
}
.bro-company__project-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bro-company__project-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.38;
  filter: saturate(0.85) contrast(1.08);
  transform: scale(1.02);
}
.bro-company__project-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0.76) 100%);
}
.bro-company__project-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
}
.bro-company__project-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}
.bro-company__project-nav {
  display: flex;
  gap: 0.8rem;
}
.bro-company__project-lead {
  margin: 0;
  font-size: clamp(1.3rem, 0.1941747573vw + 1.227184466rem, 1.7165048544rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.86);
  word-break: keep-all;
  max-width: 62rem;
}
.bro-company__project-btn {
  width: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 5.4213592233rem);
  height: clamp(3.2rem, 1.0355987055vw + 2.8116504854rem, 5.4213592233rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--clr-company-project-nav-border);
  color: var(--clr-base-white);
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s, border-color 0.2s;
}
.bro-company__project-btn:hover:not(:disabled) {
  background: var(--clr-company-project-nav-hover-bg);
  border-color: var(--clr-company-project-nav-hover-border);
}
.bro-company__project-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.bro-company__project-swiper-wrap {
  position: relative;
  width: 100%;
  isolation: isolate;
  /* 좌 → 우: 본문은 선명, 오른쪽으로 갈수록 배경색에 녹는 페이드 */
}
.bro-company__project-swiper {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
.bro-company__project-swiper .swiper-slide {
  width: auto;
  height: auto;
}
.bro-company__project-column {
  width: clamp(26rem, 2.5889967638vw + 25.0291262136rem, 31.5533980583rem);
  min-width: 22rem;
  padding-right: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem);
  box-sizing: border-box;
}
.bro-company__project-year {
  font-size: clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.9106796117rem);
  font-weight: 700;
  color: var(--clr-base-white);
  font-family: var(--family-pretendard);
  margin: 0;
  padding: 0;
  letter-spacing: -0.02em;
}
.bro-company__project-timeline {
  position: relative;
  width: 100%;
  margin: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem) 0 clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem);
}
.bro-company__project-timeline-line {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--clr-company-project-timeline);
}
.bro-company__project-timeline-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--clr-base-white);
  box-shadow: 0 0 0 3px var(--clr-company-project-bg);
}
.bro-company__project-list {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem);
}
.bro-company__project-client {
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8776699029rem);
  font-weight: 400;
  margin: 0 0 0.4rem;
  color: var(--clr-base-white);
}
.bro-company__project-desc {
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  line-height: 1.55;
  margin: 0;
  color: var(--clr-company-project-desc);
  word-break: keep-all;
}
.bro-company__portfolio {
  background: var(--clr-company-portfolio-bg);
}
.bro-company__portfolio-title {
  text-align: center;
  font-size: clamp(2.2rem, 1.1650485437vw + 1.7631067961rem, 4.6990291262rem);
  font-weight: 700;
  font-family: var(--family-pretendard);
  margin: 0;
}
.bro-company__portfolio-empty {
  margin: 0;
  text-align: center;
  font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5776699029rem);
  line-height: 1.6;
  color: var(--clr-company-clients-text);
}
.bro-company__portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 128rem;
  margin: 0 auto;
  gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem);
}
@media (max-width: 768px) {
  .bro-company__portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 544px) {
  .bro-company__portfolio-grid {
    grid-template-columns: 1fr;
  }
}
.bro-company__portfolio-card {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0.4rem;
  aspect-ratio: 4/3;
  background: var(--clr-company-portfolio-card-bg);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bro-company__portfolio-card-media {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.bro-company__portfolio-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  pointer-events: none;
  z-index: 1;
}
.bro-company__portfolio-img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.bro-company__portfolio-card:hover .bro-company__portfolio-img {
  transform: scale(1.04);
}
.bro-company__portfolio-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(1.4rem, 0.5177993528vw + 1.2058252427rem, 2.5106796117rem) clamp(1.4rem, 0.5177993528vw + 1.2058252427rem, 2.5106796117rem);
  font-size: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  background: linear-gradient(transparent, var(--clr-company-portfolio-cap-gradient-end));
  color: var(--clr-base-white);
  text-shadow: 0 0.08em 0.35em rgba(0, 0, 0, 0.55);
}
.bro-company__clients {
  background: var(--clr-company-shell-bg);
}
.bro-company__clients-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 5.732038835rem);
  flex-wrap: wrap;
}
.bro-company__clients-intro {
  flex: 1 1 28rem;
  max-width: 56rem;
}
.bro-company__clients-text {
  margin: 0;
  font-size: clamp(1.3rem, 0.1941747573vw + 1.227184466rem, 1.7165048544rem);
  line-height: 1.7;
  color: var(--clr-company-clients-text);
  word-break: keep-all;
}
.bro-company__clients-tabs {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--clr-company-tabs-border);
  border-radius: 0;
  overflow: hidden;
}
.bro-company__tab {
  padding: 0.9rem 1.6rem;
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--clr-company-tabs-text);
  background: transparent;
  transition: background 0.2s, color 0.2s;
}
.bro-company__tab--active {
  background: var(--clr-primary-main);
  color: var(--clr-base-white);
}
.bro-company__tab:not(.bro-company__tab--active):hover {
  color: var(--clr-base-white);
}
.bro-company__clients-marquees {
  width: 100%;
  max-width: none;
}
.bro-company__marquee {
  overflow: hidden;
  border-radius: 0;
  border-top: 1px solid var(--clr-company-marquee-edge);
  border-bottom: 1px solid var(--clr-company-marquee-edge);
  background: var(--clr-company-marquee-bg);
  container-type: inline-size;
  container-name: bro-company-marquee;
  /* 한 줄에 보이는 카드 수 (데스크톱 6 → 태블릿 4 → 모바일 3 / 2) */
  --marquee-visible: 6;
  --marquee-gap: clamp(1.4rem, 0.5177993528vw + 1.2058252427rem, 2.5106796117rem);
}
@media (max-width: 1024px) {
  .bro-company__marquee {
    --marquee-visible: 4;
  }
}
@media (max-width: 544px) {
  .bro-company__marquee {
    --marquee-visible: 3;
  }
}
@media (max-width: 450px) {
  .bro-company__marquee {
    --marquee-visible: 2;
  }
}
.bro-company__marquee.is-hidden {
  display: none;
}
.bro-company__marquee-track {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: var(--marquee-gap);
  width: max-content;
  will-change: transform;
  animation: bro-company-marquee 90s linear infinite;
}
.bro-company__marquee-track:hover {
  animation-play-state: paused;
}
.bro-company__marquee-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc((100cqi - (var(--marquee-visible) - 1) * var(--marquee-gap)) / var(--marquee-visible));
  min-height: clamp(8.8rem, 2.071197411vw + 8.0233009709rem, 13.2427184466rem);
  padding: clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 3.2660194175rem) clamp(2rem, 1.0355987055vw + 1.6116504854rem, 4.2213592233rem);
  background: var(--clr-company-service-bg);
  border-radius: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem);
}
.bro-company__marquee-img {
  width: 100%;
  height: auto;
  max-height: clamp(5.6rem, 2.3300970874vw + 4.7262135922rem, 10.5980582524rem);
  object-fit: contain;
  display: block;
  opacity: 0.95;
}
.bro-company__contact {
  position: relative;
  overflow: hidden;
}
.bro-company__contact-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(3.2rem, 2.071197411vw + 2.4233009709rem, 7.6427184466rem);
  align-items: start;
}
@media (max-width: 1024px) {
  .bro-company__contact-inner {
    grid-template-columns: 1fr;
  }
}
.bro-company__contact-lead {
  margin: 0;
  font-size: clamp(1.3rem, 0.1941747573vw + 1.227184466rem, 1.7165048544rem);
  line-height: 1.75;
  color: var(--clr-company-contact-lead);
  word-break: keep-all;
}
.bro-company__form {
  background: var(--clr-company-form-bg);
  border: 1px solid var(--clr-company-form-border);
  border-radius: 0.6rem;
  padding: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.6660194175rem);
}
.bro-company__form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2.2330097087rem);
}
@media (max-width: 544px) {
  .bro-company__form-grid {
    grid-template-columns: 1fr;
  }
}
.bro-company__field {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.bro-company__field--full {
  grid-column: 1/-1;
  margin-top: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem);
}
.bro-company__label {
  font-size: clamp(1.1rem, 0.1294498382vw + 1.0514563107rem, 1.3776699029rem);
  font-weight: 400;
  color: var(--clr-company-label);
}
.bro-company__req {
  color: var(--clr-company-error);
}
.bro-company__field input, .bro-company__field textarea, .bro-company__select {
  width: 100%;
  padding: 1rem 1.2rem;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  border-radius: 0.4rem;
  background: var(--clr-company-input-bg);
  border: 1px solid var(--clr-company-input-border);
  color: var(--clr-base-white);
}
.bro-company__field input::placeholder, .bro-company__field textarea::placeholder, .bro-company__select::placeholder {
  color: var(--clr-company-input-placeholder);
}
.bro-company__field input:focus, .bro-company__field textarea:focus, .bro-company__select:focus {
  border-color: var(--clr-company-input-focus);
}
.bro-company__field textarea {
  min-height: 12rem;
  resize: vertical;
}
.bro-company__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23fff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2rem center;
  padding-right: 3rem;
}
.bro-company__form-footer {
  margin-top: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
}
.bro-company__form-submit-wrap {
  flex: 1 1 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem);
}
.bro-company__form-submit-wrap .no-btn--form-submit {
  margin-left: 0;
}
@media (max-width: 544px) {
  .bro-company__form-submit-wrap .no-btn--form-submit {
    width: 100%;
  }
}
.bro-company__privacy {
  flex: 1 1 100%;
}
.bro-company__privacy-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3388349515rem);
  line-height: 1.55;
  color: var(--clr-company-privacy-text);
  user-select: none;
}
.bro-company__privacy-control {
  position: relative;
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  margin-top: 0.1rem;
}
.bro-company__privacy-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.bro-company__privacy-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--clr-company-privacy-border);
  border-radius: 0;
  background: var(--clr-company-privacy-face-bg);
  pointer-events: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.bro-company__privacy-face i {
  font-size: 1rem;
  line-height: 1;
  color: var(--clr-base-white);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.bro-company__privacy-label:focus-within .bro-company__privacy-face {
  outline: 2px solid var(--clr-company-privacy-focus);
  outline-offset: 2px;
}
.bro-company__privacy-input:checked + .bro-company__privacy-face {
  border-color: var(--clr-primary-main);
  background: var(--clr-primary-main);
}
.bro-company__privacy-input:checked + .bro-company__privacy-face i {
  opacity: 1;
  transform: scale(1);
}
.bro-company__privacy-text {
  flex: 1 1 auto;
  min-width: 0;
}
.bro-company__captcha-field {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1 1 22rem;
  min-width: 0;
}
@media (max-width: 544px) {
  .bro-company__captcha-field {
    flex: 1 1 100%;
  }
}
.bro-company__captcha-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(1rem, 0.3883495146vw + 0.854368932rem, 1.8330097087rem);
  width: 100%;
}
.bro-company__captcha-img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: stretch;
  min-width: min(100%, 7.75rem);
  padding: 0 0.65rem;
  box-sizing: border-box;
  background: var(--clr-company-service-bg);
  border: 1px solid var(--clr-company-captcha-border);
  border-radius: 0.4rem;
}
.bro-company__captcha-img-wrap img {
  display: block;
  max-height: min(2.5rem, 100%);
  width: auto;
  max-width: 100%;
  cursor: pointer;
  object-fit: contain;
}
.bro-company__captcha-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 3.5rem;
  width: 3.5rem;
  align-self: stretch;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--clr-company-captcha-refresh-border);
  border-radius: 0.4rem;
  background: var(--clr-overlay-black-35);
  color: var(--clr-company-captcha-refresh-text);
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.bro-company__captcha-refresh:hover {
  border-color: var(--clr-company-captcha-refresh-hover-border);
  color: var(--clr-base-white);
  background: var(--clr-company-captcha-refresh-hover-bg);
}
.bro-company__captcha-input {
  flex: 1 1 16rem;
  min-width: 0;
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  padding: 1rem 1.2rem;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  border-radius: 0.4rem;
  background: var(--clr-company-input-bg);
  border: 1px solid var(--clr-company-input-border);
  color: var(--clr-base-white);
}
.bro-company__captcha-input::placeholder {
  color: var(--clr-company-input-placeholder);
}
.bro-company__captcha-input:focus {
  border-color: var(--clr-company-input-focus);
  outline: none;
}
@media (max-width: 544px) {
  .bro-company__captcha-input {
    flex: 1 1 100%;
  }
}
.bro-company__location {
  background: var(--clr-company-location-bg);
  padding: 0;
  overflow: hidden;
}
.bro-company__location-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--clr-company-location-bg);
}
.bro-company__location-wrap {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  /* 텍스트(좌) : 약도(우) — 우측을 넓혀 세로 letterbox를 줄이고, 이미지는 cover로 셀을 채움 */
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  column-gap: clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 5.5766990291rem);
  align-items: stretch;
}
@media (max-width: 1024px) {
  .bro-company__location-wrap {
    grid-template-columns: 1fr;
    row-gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.6660194175rem);
    align-items: start;
  }
}
.bro-company__location-left {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(2rem, 0.7766990291vw + 1.7087378641rem, 3.6660194175rem);
  min-width: 0;
}
.bro-company__location-heading {
  margin: 0;
}
.bro-company__location-panel {
  margin-top: 0;
  padding-bottom: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.9106796117rem);
  min-width: 0;
}
.bro-company__location-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  min-width: 0;
  box-sizing: border-box;
}
.bro-company__location-cell--soft dd {
  font-weight: 400;
}
.bro-company__location-cell--soft dd a {
  font-weight: 400;
  text-decoration: none;
  border-bottom: none;
  color: inherit;
}
.bro-company__location-cell--email dd a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--clr-company-email-underline);
}
.bro-company__location-cell--email dd a:hover {
  text-decoration-color: var(--clr-company-email-underline-hover);
}
.bro-company__dl {
  margin: 0;
}
.bro-company__dl--location {
  /* 값(dd)은 항목 간 동일한 크기·굵기 (링크 포함) */
  /* 세로 한 열 */
}
.bro-company__dl--location dt {
  margin: 0;
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--clr-company-location-dt);
}
.bro-company__dl--location dd {
  margin: 0;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--clr-base-white);
  word-break: keep-all;
}
.bro-company__dl--location dd a {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.bro-company__dl--location-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  row-gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2.2330097087rem);
}
.bro-company__location-cell--address {
  min-width: 0;
}
.bro-company__location-address-dd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
}
.bro-company__location-address-text {
  display: block;
}
.bro-company__location-transit {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
}
.bro-company__location-transit-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65em;
  margin: 0;
  padding: 0;
  font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5776699029rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--clr-company-location-transit-text, rgba(255, 255, 255, 0.9));
  word-break: keep-all;
}
.bro-company__location-transit-badge {
  flex-shrink: 0;
  width: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2776699029rem);
  height: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2776699029rem);
  min-width: 0.625rem;
  min-height: 0.625rem;
  margin-top: 0.38em;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.bro-company__location-transit-item--line9 .bro-company__location-transit-badge {
  background: #c6a052;
}
.bro-company__location-transit-item--line5 .bro-company__location-transit-badge {
  background: #996cac;
}
.bro-company__location-transit-label {
  flex: 1 1 auto;
  min-width: 0;
}
.bro-company__location-cell--tel dd, .bro-company__location-cell--fax dd {
  white-space: nowrap;
}
.bro-company__location-map {
  position: relative;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  overflow: hidden;
  border: none;
  min-width: 0;
  min-height: 0;
  width: min(100%, 62rem);
  align-self: stretch;
}
@media (max-width: 1024px) {
  .bro-company__location-map {
    align-self: start;
    align-items: flex-start;
    padding-bottom: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.9106796117rem);
  }
}
.bro-company__location-map-img {
  flex: 1;
  position: static;
  inset: auto;
  height: auto;
  max-width: 100%;
  display: block;
  border-radius: 0;
  object-fit: contain;
  object-position: center center;
}
@media (max-width: 1024px) {
  .bro-company__location-map-img {
    width: 100%;
    max-width: 100%;
  }
}
.bro-company__location-transit--below-map {
  width: min(100%, 52rem);
}
@media (max-width: 1024px) {
  .bro-company__location-transit--below-map {
    width: 100%;
  }
}

@keyframes bro-company-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* Services — 상세 등 다크 셸 (목록은 .bro-services-lib-main) */
.bro-services-main {
  padding: 0;
  margin: 0;
  background: #000;
  color: #fff;
}

/* Services index — 히어로 + 상위 서비스 2×2(대표 설명 + 하위 항목) */
.bro-services-lib-main {
  padding: 0;
  margin: 0;
  background: #000;
  color: rgba(255, 255, 255, 0.9);
}

.bro-services-lib {
  --bro-services-anchor-offset: calc(
      var(--header-height) + clamp(11.2rem, 1.8122977346vw + 10.5203883495rem, 15.0873786408rem)
  );
  --bro-services-tabs-overlap: calc(6rem + clamp(6.8rem, 1.4239482201vw + 6.2660194175rem, 9.854368932rem));
  font-family: var(--family-kr), var(--family-base), system-ui, sans-serif;
  overflow: visible;
  /* Services 목록 — Company 히어로 + 하단 탭(포트폴리오형) */
  /* 히어로 + 본문: sticky 탭이 스크롤 내내 유효하도록 한 래퍼 */
  /* 히어로 하단에서 6rem 위로 탭 띠를 올려 겹침(높이는 탭 바 + 여백에 맞춤) */
  /* 상단 고정은 CSS sticky */
}
.bro-services-lib__hero {
  position: relative;
  min-height: clamp(28rem, 9.0614886731vw + 24.6019417476rem, 47.4368932039rem);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-height) + clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4.6213592233rem)) 0 clamp(4rem, 1.0355987055vw + 3.6116504854rem, 6.2213592233rem);
  box-sizing: border-box;
}
.bro-services-lib__hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.bro-services-lib__hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.bro-services-lib__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.45) 48%, rgba(0, 0, 0, 0.35) 100%);
}
.bro-services-lib__hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.bro-services-lib__hero-kicker {
  margin: 0 0 clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  font-size: clamp(1.1rem, 0.1294498382vw + 1.0514563107rem, 1.3776699029rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.bro-services-lib__hero-title {
  margin: 0;
  font-size: clamp(3.4rem, 1.4239482201vw + 2.8660194175rem, 6.454368932rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #fff;
}
.bro-services-lib__index-hero.bro-company__hero {
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--header-height);
  padding-bottom: clamp(2.4rem, 1.5533980583vw + 1.8174757282rem, 5.732038835rem);
  overflow: visible;
}
.bro-services-lib__hero-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-height: 0;
}
.bro-services-lib__hero-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: clamp(1.2rem, 0.7766990291vw + 0.9087378641rem, 2.8660194175rem);
}
.bro-services-lib__main {
  min-width: 0;
}
.bro-services-lib__tabs-rail {
  position: sticky;
  top: var(--header-height);
  z-index: calc(var(--header-z-index, 100) + 1);
  margin-top: calc(-1 * var(--bro-services-tabs-overlap));
  pointer-events: none;
}
.bro-services-lib__tabs-rail .bro-services-lib__tabs {
  pointer-events: auto;
}
.bro-services-lib__body {
  position: relative;
  z-index: 0;
  padding: calc(clamp(6.8rem, 1.4239482201vw + 6.2660194175rem, 9.854368932rem) + clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 4.0660194175rem)) 0 clamp(7.2rem, 2.5889967638vw + 6.2291262136rem, 12.7533980583rem);
}
.bro-services-lib__tabs {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  box-shadow: none;
}
.bro-services-lib__tabs-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: min(100%, clamp(68rem, 28.4789644013vw + 57.3203883495rem, 129.0873786408rem));
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
.bro-services-lib__tabs-item {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
.bro-services-lib__tabs-item + .bro-services-lib__tabs-item {
  border-left: 1px solid rgba(0, 0, 0, 0.12);
}
.bro-services-lib__tabs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(4.8rem, 0.6472491909vw + 4.5572815534rem, 6.1883495146rem);
  margin: 0;
  padding: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem) clamp(0.6rem, 0.3883495146vw + 0.454368932rem, 1.4330097087rem);
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: inherit;
  font-size: clamp(1rem, 0.1941747573vw + 0.927184466rem, 1.4165048544rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-align: center;
  text-transform: none;
  color: #0a0a0a;
  cursor: pointer;
  background: linear-gradient(180deg, #f4f2f0 0%, #e6e3df 100%);
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
@media (min-width: 768px) {
  .bro-services-lib__tabs-btn {
    font-size: clamp(1.1rem, 0.1941747573vw + 1.027184466rem, 1.5165048544rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}
.bro-services-lib__tabs-btn:hover:not(.is-active) {
  background: var(--clr-primary-main);
  color: #fff;
}
.bro-services-lib__tabs-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: -2px;
  z-index: 1;
}
.bro-services-lib__tabs-btn.is-active {
  color: #fff;
  font-weight: 700;
  background: var(--clr-primary-main);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.bro-services-lib__overview {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 1.5533980583vw + 3.4174757282rem, 7.332038835rem);
  align-items: stretch;
}
.bro-services-lib__section {
  min-width: 0;
  box-sizing: border-box;
  scroll-margin-top: var(--bro-services-anchor-offset);
}
.bro-services-lib__section-head {
  margin-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
}
.bro-services-lib__section-kicker {
  margin: 0 0 clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem);
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1388349515rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}
.bro-services-lib__section-title {
  margin: 0 0 clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  font-size: clamp(2.2rem, 0.5177993528vw + 2.0058252427rem, 3.3106796117rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #fff;
}
.bro-services-lib__section-lead {
  margin: 0;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  word-break: keep-all;
}
.bro-services-lib__item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem);
}
@media (max-width: 1024px) {
  .bro-services-lib__item-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .bro-services-lib__item-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 544px) {
  .bro-services-lib__item-list {
    grid-template-columns: 1fr;
  }
}
.bro-services-lib__item-row {
  margin: 0;
  min-width: 0;
  display: flex;
}
.bro-services-lib__item-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: 100%;
  padding: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(10px);
  text-decoration: none;
  color: inherit;
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(0);
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
@media (max-width: 544px) {
  .bro-services-lib__item-card {
    flex-direction: column;
    align-items: stretch;
  }
}
.bro-services-lib__item-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.72);
  background: linear-gradient(180deg, #f4f2f0 0%, #e6e3df 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 18px 40px rgba(0, 0, 0, 0.3);
}
.bro-services-lib__item-card:hover .bro-services-lib__item-title {
  color: #111827;
}
.bro-services-lib__item-card:hover .bro-services-lib__item-desc {
  color: rgba(17, 24, 39, 0.72);
}
.bro-services-lib__item-card:hover .bro-services-lib__item-cta-label {
  color: var(--clr-primary-main);
}
.bro-services-lib__item-card:hover .bro-services-lib__item-cta-icon {
  border-color: var(--clr-primary-main);
  color: var(--clr-primary-main);
}
.bro-services-lib__item-card:hover .bro-services-lib__item-thumb {
  filter: brightness(0.92) saturate(0.82) contrast(1.04);
}
.bro-services-lib__item-card:focus-visible {
  outline: 2px solid rgba(138, 164, 212, 0.85);
  outline-offset: 4px;
  border-radius: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem);
}
.bro-services-lib__item-thumb-wrap {
  position: relative;
  align-self: flex-start;
  overflow: hidden;
  border-radius: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8776699029rem);
  background: #1a1a1a;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 62.5%;
  width: 100%;
}
.bro-services-lib__item-thumb-wrap img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bro-services-lib__item-thumb-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.42) 100%);
}
@media (max-width: 544px) {
  .bro-services-lib__item-thumb-wrap {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    max-width: none;
    aspect-ratio: 16/10;
  }
}
.bro-services-lib__item-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.76) saturate(0.68) contrast(1.02);
  transform: translateZ(0);
  transition: filter 0.2s ease;
}
.bro-services-lib__item-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem);
}
.bro-services-lib__item-title {
  margin: 0;
  font-size: clamp(1.6rem, 0.1941747573vw + 1.527184466rem, 2.0165048544rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.96);
  transition: color 0.2s ease;
}
.bro-services-lib__item-desc {
  margin: 0;
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
  word-break: keep-all;
  transition: color 0.2s ease;
}
.bro-services-lib__item-cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  margin-top: auto;
  padding-top: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem);
}
.bro-services-lib__item-cta-label {
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3388349515rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}
.bro-services-lib__item-cta-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.2rem, 0.2588996764vw + 3.1029126214rem, 3.7553398058rem);
  height: clamp(3.2rem, 0.2588996764vw + 3.1029126214rem, 3.7553398058rem);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.92);
  transition: border-color 0.2s ease, color 0.2s ease;
}

/* —— Service detail —— */
.bro-services-detail {
  font-family: var(--family-kr), var(--family-base), sans-serif;
  overflow-x: clip;
  /* ServiceItem 상세 레이아웃은 .bro-svc-item */
}
.bro-services-detail a {
  color: inherit;
}
.bro-services-detail__inner {
  padding: calc(var(--header-height) + clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4.4660194175rem)) 0 0;
}
.bro-services-detail__nav {
  margin-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
}
.bro-services-detail__back {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem);
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}
.bro-services-detail__back:hover, .bro-services-detail__back:focus-visible {
  color: #fff;
}
.bro-services-detail__back .fa-arrow-left {
  font-size: 0.9em;
}
.bro-services-detail__kicker {
  margin: 0 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  font-size: clamp(1.1rem, 0.1294498382vw + 1.0514563107rem, 1.3776699029rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.bro-services-detail__title {
  margin: 0;
  font-size: clamp(3rem, 1.5533980583vw + 2.4174757282rem, 6.332038835rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
}
.bro-services-detail__lead {
  margin: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem) 0 0;
  font-size: clamp(1.4rem, 0.1941747573vw + 1.327184466rem, 1.8165048544rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
  word-break: keep-all;
  max-width: 52rem;
}
.bro-services-detail__visual {
  flex-shrink: 0;
  align-self: flex-start;
}
.bro-services-detail__visual-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(12rem, 2.5889967638vw + 11.0291262136rem, 17.5533980583rem);
  aspect-ratio: 1;
  border-radius: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.03);
}
.bro-services-detail__visual-box lord-icon {
  display: block;
  width: clamp(7.2rem, 1.5533980583vw + 6.6174757282rem, 10.532038835rem) !important;
  height: clamp(7.2rem, 1.5533980583vw + 6.6174757282rem, 10.532038835rem) !important;
}
.bro-services-detail__banner {
  padding: 0 0 clamp(5.6rem, 2.071197411vw + 4.8233009709rem, 10.0427184466rem);
}
.bro-services-detail__section {
  padding: clamp(4.8rem, 2.071197411vw + 4.0233009709rem, 9.2427184466rem) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.bro-services-detail__section--contact {
  padding-bottom: clamp(7.2rem, 2.5889967638vw + 6.2291262136rem, 12.7533980583rem);
}
.bro-services-detail__section-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 4.0660194175rem);
}
.bro-services-detail__section-inner--banner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 5.5766990291rem);
  align-items: center;
}
@media (max-width: 768px) {
  .bro-services-detail__section-inner--banner {
    grid-template-columns: 1fr;
  }
}
.bro-services-detail__banner-copy {
  min-width: 0;
}
.bro-services-detail__banner-media {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  min-width: 0;
}
.bro-services-detail__section-head {
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  max-width: 48rem;
}
.bro-services-detail__section-label {
  margin: 0;
  font-size: clamp(1.1rem, 0.1294498382vw + 1.0514563107rem, 1.3776699029rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.bro-services-detail__section-title {
  margin: 0;
  font-size: clamp(2.4rem, 0.6472491909vw + 2.1572815534rem, 3.7883495146rem);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.bro-services-detail__section-lead {
  margin: 0;
  max-width: 56rem;
  font-size: clamp(1.5rem, 0.3236245955vw + 1.3786407767rem, 2.1941747573rem);
  font-weight: 500;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  word-break: keep-all;
}
.bro-services-detail__subgrid {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}
.bro-services-detail__subgrid-cell {
  padding: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem) clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.6330097087rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  min-width: 0;
}
.bro-services-detail__subgrid-cell:last-child {
  border-bottom: none;
}
.bro-services-detail__subgrid-name {
  font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5776699029rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.45;
  word-break: keep-all;
}
.bro-services-detail__subgrid-desc {
  display: block;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  line-height: 1.7;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  word-break: keep-all;
}

/* —— ServiceItem 상세 (히어로 + 본문 + 우측 TOC) —— */
.bro-svc-item {
  font-family: var(--family-kr), var(--family-base), system-ui, sans-serif;
  color: #111;
  background: #fff;
  /* 우측 고정: 세로 캡슐 TOC + 알약형 문의 + 원형 전화 (펼침은 SCSS :hover / :focus) */
}
.bro-svc-item a {
  color: inherit;
}
.bro-svc-item__hero {
  position: relative;
  padding: calc(var(--header-height) + clamp(2rem, 1.0355987055vw + 1.6116504854rem, 4.2213592233rem)) 0 clamp(4.8rem, 1.5533980583vw + 4.2174757282rem, 8.132038835rem);
  background: linear-gradient(165deg, #050508 0%, #0a1628 45%, #050508 100%);
  color: #fff;
  overflow: hidden;
}
.bro-svc-item__hero-wave {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bro-svc-item__hero-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.bro-svc-item__hero-inner {
  position: relative;
  z-index: 1;
}
.bro-svc-item__breadcrumb {
  margin-bottom: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
}
.bro-svc-item__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3388349515rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}
.bro-svc-item__breadcrumb-list a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.2s ease;
}
.bro-svc-item__breadcrumb-list a:hover {
  color: #fff;
}
.bro-svc-item__breadcrumb-list span {
  color: rgba(255, 255, 255, 0.95);
}
.bro-svc-item__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
  gap: clamp(2.8rem, 1.8122977346vw + 2.1203883495rem, 6.6873786408rem);
  align-items: center;
}
@media (max-width: 1024px) {
  .bro-svc-item__hero-grid {
    grid-template-columns: 1fr;
  }
}
.bro-svc-item__hero-eyebrow {
  margin: 0 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2388349515rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.bro-svc-item__hero-title {
  margin: 0;
  font-size: clamp(3.2rem, 1.2944983819vw + 2.7145631068rem, 5.9766990291rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: #fff;
}
.bro-svc-item__hero-lead {
  margin: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem) 0 0;
  font-size: clamp(1.5rem, 0.1941747573vw + 1.427184466rem, 1.9165048544rem);
  line-height: 1.75;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  word-break: keep-all;
  max-width: 40rem;
}
.bro-svc-item__hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  margin-top: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
}
.bro-svc-item__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem);
  padding: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem) clamp(2.2rem, 0.3883495146vw + 2.054368932rem, 3.0330097087rem);
  border-radius: 999px;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.bro-svc-item__btn--primary {
  background: var(--clr-primary-main);
  color: #fff;
  border: 1px solid transparent;
}
.bro-svc-item__btn--primary:hover {
  background: var(--clr-primary-700);
}
.bro-svc-item__btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.bro-svc-item__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.75);
}
.bro-svc-item__btn--inline {
  align-self: flex-start;
}
.bro-svc-item__btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 3px;
}
.bro-svc-item__hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
@media (max-width: 1024px) {
  .bro-svc-item__hero-visual {
    max-width: min(100%, 22rem);
    margin: 0 auto;
  }
}
.bro-svc-item__hero-orbit {
  position: relative;
  width: min(100%, clamp(28rem, 9.0614886731vw + 24.6019417476rem, 47.4368932039rem));
  aspect-ratio: 1;
  margin: 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
  .bro-svc-item__hero-orbit {
    animation: bro-svc-orb-orbit-float 7s ease-in-out infinite;
  }
}
.bro-svc-item__hero-disk {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.15), 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 0 60px rgba(59, 130, 246, 0.12);
}
.bro-svc-item__hero-disk--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
}
.bro-svc-item__hero-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .bro-svc-item__hero-img {
    animation: bro-svc-orb-img-spin 96s linear infinite;
  }
}
.bro-svc-item__hero-lord {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  height: 70%;
}
.bro-svc-item__hero-lord lord-icon {
  width: 100% !important;
  height: 100% !important;
}
.bro-svc-item__shell-wrap {
  background: var(--clr-gray-50);
}
.bro-svc-item__shell {
  display: block;
  width: 100%;
  min-width: 0;
}
@media (min-width: 1024px) {
  .bro-svc-item__dock {
    position: fixed;
    top: 50%;
    /* 노치·라운드 코너 기기: 가려짐 방지 */
    right: max(clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem), env(safe-area-inset-right, 0px));
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
    max-width: min(clamp(28rem, 1.2944983819vw + 27.5145631068rem, 30.7766990291rem), 100vw - 24px - env(safe-area-inset-right, 0px));
    transform: translateY(-50%);
  }
  .bro-svc-item__dock .bro-svc-item__toc,
  .bro-svc-item__dock .bro-svc-item__dock-fabs {
    flex-shrink: 0;
  }
}
@media (max-width: 1024px) {
  .bro-svc-item__dock {
    display: none;
  }
}
.bro-svc-item__dock-fabs {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem);
}
.bro-svc-item__dock-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  min-height: clamp(4.4rem, 0.2588996764vw + 4.3029126214rem, 4.9553398058rem);
  padding: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2776699029rem) clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #111;
  text-decoration: none;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.bro-svc-item__dock-pill-text {
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3388349515rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
}
.bro-svc-item__dock-pill-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.5rem, 0.1294498382vw + 1.4514563107rem, 1.7776699029rem);
  flex-shrink: 0;
  opacity: 0.95;
  line-height: 0;
}
.bro-svc-item__dock-pill-icons i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  line-height: 1;
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .bro-svc-item__dock-pill {
    max-width: clamp(5rem, 0.2588996764vw + 4.9029126214rem, 5.5553398058rem);
    min-width: clamp(5rem, 0.2588996764vw + 4.9029126214rem, 5.5553398058rem);
    gap: 0;
    transition: max-width 0.38s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.38s cubic-bezier(0.4, 0, 0.2, 1), padding 0.38s cubic-bezier(0.4, 0, 0.2, 1), gap 0.38s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.22s ease;
  }
  .bro-svc-item__dock-pill .bro-svc-item__dock-pill-text {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1) 0s, max-width 0s linear 0s;
  }
  .bro-svc-item__dock-pill:hover, .bro-svc-item__dock-pill:focus-visible {
    max-width: min(clamp(26rem, 1.2944983819vw + 25.5145631068rem, 28.7766990291rem), 100vw - 48px);
    min-width: 0;
    gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
    justify-content: space-between;
    padding-left: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
    padding-right: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
    color: var(--clr-primary-main);
  }
  .bro-svc-item__dock-pill:hover .bro-svc-item__dock-pill-text, .bro-svc-item__dock-pill:focus-visible .bro-svc-item__dock-pill-text {
    max-width: 12rem;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1) 0.06s, max-width 0s linear 0.06s;
  }
}
@media (min-width: 1024px) {
  @media not all and (hover: hover) and (pointer: fine) {
    .bro-svc-item__dock-pill {
      max-width: min(clamp(26rem, 1.2944983819vw + 25.5145631068rem, 28.7766990291rem), 100vw - 48px);
      min-width: 0;
      gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
      justify-content: space-between;
      padding-left: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
      padding-right: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
    }
    .bro-svc-item__dock-pill .bro-svc-item__dock-pill-text {
      max-width: 12rem;
      opacity: 1;
      pointer-events: auto;
    }
  }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .bro-svc-item__dock-pill {
    max-width: min(clamp(26rem, 1.2944983819vw + 25.5145631068rem, 28.7766990291rem), 100vw - 48px) !important;
    min-width: 0 !important;
    gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem) !important;
    justify-content: space-between !important;
    transition: none !important;
  }
  .bro-svc-item__dock-pill .bro-svc-item__dock-pill-text {
    max-width: 12rem !important;
    opacity: 1 !important;
  }
}
.bro-svc-item__dock-pill:focus-visible {
  outline: 2px solid rgba(13, 53, 114, 0.35);
  outline-offset: 3px;
}
.bro-svc-item__dock-fab {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #111;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
  font-size: clamp(1.6rem, 0.1294498382vw + 1.5514563107rem, 1.8776699029rem);
  line-height: 0;
  overflow: hidden;
}
.bro-svc-item__dock-fab-text {
  display: block;
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3388349515rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
}
.bro-svc-item__dock-fab-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(4.4rem, 0.5177993528vw + 4.2058252427rem, 5.5106796117rem);
  height: clamp(4.4rem, 0.5177993528vw + 4.2058252427rem, 5.5106796117rem);
  line-height: 0;
}
.bro-svc-item__dock-fab-icon i {
  line-height: 1;
}
.bro-svc-item__dock-fab i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  line-height: 1;
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .bro-svc-item__dock-fab {
    width: clamp(4.4rem, 0.5177993528vw + 4.2058252427rem, 5.5106796117rem);
    min-width: clamp(4.4rem, 0.5177993528vw + 4.2058252427rem, 5.5106796117rem);
    max-width: clamp(4.4rem, 0.5177993528vw + 4.2058252427rem, 5.5106796117rem);
    min-height: clamp(4.4rem, 0.5177993528vw + 4.2058252427rem, 5.5106796117rem);
    gap: 0;
    transition: width 0.38s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.38s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.38s cubic-bezier(0.4, 0, 0.2, 1), padding 0.38s cubic-bezier(0.4, 0, 0.2, 1), gap 0.38s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.22s ease;
  }
  .bro-svc-item__dock-fab .bro-svc-item__dock-fab-text {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1) 0s, max-width 0s linear 0s;
  }
  .bro-svc-item__dock-fab:hover, .bro-svc-item__dock-fab:focus-visible {
    width: auto;
    min-width: 0;
    max-width: min(clamp(28rem, 1.2944983819vw + 27.5145631068rem, 30.7766990291rem), 100vw - 48px);
    gap: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem);
    justify-content: space-between;
    padding-left: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
    padding-right: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6776699029rem);
    color: var(--clr-primary-main);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.15);
  }
  .bro-svc-item__dock-fab:hover .bro-svc-item__dock-fab-text, .bro-svc-item__dock-fab:focus-visible .bro-svc-item__dock-fab-text {
    max-width: 14rem;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.26s cubic-bezier(0.4, 0, 0.2, 1) 0.06s, max-width 0s linear 0.06s;
  }
}
@media (min-width: 1024px) {
  @media not all and (hover: hover) and (pointer: fine) {
    .bro-svc-item__dock-fab {
      width: auto;
      min-width: 0;
      max-width: min(clamp(28rem, 1.2944983819vw + 27.5145631068rem, 30.7766990291rem), 100vw - 48px);
      gap: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem);
      justify-content: space-between;
      padding-left: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
      padding-right: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6776699029rem);
    }
    .bro-svc-item__dock-fab .bro-svc-item__dock-fab-text {
      max-width: 14rem;
      opacity: 1;
    }
  }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .bro-svc-item__dock-fab {
    width: auto !important;
    min-width: 0 !important;
    max-width: min(clamp(28rem, 1.2944983819vw + 27.5145631068rem, 30.7766990291rem), 100vw - 48px) !important;
    gap: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem) !important;
    justify-content: space-between !important;
    padding-left: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem) !important;
    padding-right: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6776699029rem) !important;
    transition: none !important;
  }
  .bro-svc-item__dock-fab .bro-svc-item__dock-fab-text {
    max-width: 14rem !important;
    opacity: 1 !important;
  }
}
.bro-svc-item__dock-fab:focus-visible {
  outline: 2px solid rgba(13, 53, 114, 0.35);
  outline-offset: 3px;
}
.bro-svc-item__toc {
  /* 펼침: 박스(폭·패딩) 먼저 → 글자는 약간 뒤에서 페이드인 / 접힘: 글자 먼저 사라짐 → 박스 축소 */
  box-sizing: border-box;
  padding: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
  max-height: min(80vh, 520px);
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 1024px) {
  .bro-svc-item__toc {
    width: max-content;
    min-width: 0;
    border-radius: 999px;
  }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .bro-svc-item__toc:hover, .bro-svc-item__toc:focus-within {
    transition: max-width 0.45s cubic-bezier(0.33, 1, 0.32, 1) 0s, min-width 0.45s cubic-bezier(0.33, 1, 0.32, 1) 0s, width 0.45s cubic-bezier(0.33, 1, 0.32, 1) 0s, box-shadow 0.38s cubic-bezier(0.33, 1, 0.32, 1);
    max-width: min(clamp(27rem, 1.9417475728vw + 26.2718446602rem, 31.1650485437rem), 100vw - 32px);
    min-width: 0;
    width: max-content;
    border-radius: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
  .bro-svc-item__toc:hover .bro-svc-item__toc-title,
  .bro-svc-item__toc:hover .bro-svc-item__toc-text, .bro-svc-item__toc:focus-within .bro-svc-item__toc-title,
  .bro-svc-item__toc:focus-within .bro-svc-item__toc-text {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.24s cubic-bezier(0.33, 1, 0.32, 1) 0.34s;
  }
  .bro-svc-item__toc:hover .bro-svc-item__toc-text, .bro-svc-item__toc:focus-within .bro-svc-item__toc-text {
    flex: 1;
    min-width: 0;
    max-width: none;
  }
  .bro-svc-item__toc:hover .bro-svc-item__toc-links-wrap, .bro-svc-item__toc:focus-within .bro-svc-item__toc-links-wrap {
    justify-content: flex-start;
    align-items: stretch;
  }
  .bro-svc-item__toc:hover .bro-svc-item__toc-grid, .bro-svc-item__toc:focus-within .bro-svc-item__toc-grid {
    position: static;
    inset: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    overflow: visible;
    pointer-events: auto;
  }
  .bro-svc-item__toc:hover .bro-svc-item__toc-row, .bro-svc-item__toc:focus-within .bro-svc-item__toc-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .bro-svc-item__toc:hover .bro-svc-item__toc-link, .bro-svc-item__toc:focus-within .bro-svc-item__toc-link {
    justify-content: flex-start;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.24s cubic-bezier(0.33, 1, 0.32, 1) 0.34s, color 0.2s ease;
  }
  .bro-svc-item__toc:hover .bro-svc-item__toc-title, .bro-svc-item__toc:focus-within .bro-svc-item__toc-title {
    max-height: 4rem;
    opacity: 1;
    margin-bottom: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem);
    transition: opacity 0.24s cubic-bezier(0.33, 1, 0.32, 1) 0.34s, margin 0s linear 0.34s;
  }
  .bro-svc-item__toc:not(:hover):not(:focus-within) {
    transition: max-width 0.45s cubic-bezier(0.33, 1, 0.32, 1) 0.14s, min-width 0.45s cubic-bezier(0.33, 1, 0.32, 1) 0.14s, width 0.45s cubic-bezier(0.33, 1, 0.32, 1) 0.14s, box-shadow 0.32s cubic-bezier(0.33, 1, 0.32, 1);
    width: auto;
    max-width: clamp(4.8rem, 0.5177993528vw + 4.6058252427rem, 5.9106796117rem);
    min-width: clamp(4.8rem, 0.5177993528vw + 4.6058252427rem, 5.9106796117rem);
    /* 텍스트 열 접기 → 캡슐에는 점 열만 */
  }
  .bro-svc-item__toc:not(:hover):not(:focus-within) .bro-svc-item__toc-inner {
    padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem) clamp(0.7rem, 0.1294498382vw + 0.6514563107rem, 0.9776699029rem);
    transition: padding 0.45s cubic-bezier(0.33, 1, 0.32, 1) 0.14s;
  }
  .bro-svc-item__toc:not(:hover):not(:focus-within) .bro-svc-item__toc-links-wrap {
    justify-content: center;
    align-items: center;
  }
  .bro-svc-item__toc:not(:hover):not(:focus-within) .bro-svc-item__toc-grid {
    gap: clamp(1.1rem, 0.2588996764vw + 1.0029126214rem, 1.6553398058rem);
    --bro-toc-grid-row-gap: clamp(1.1rem, 0.2588996764vw + 1.0029126214rem, 1.6553398058rem);
  }
  .bro-svc-item__toc:not(:hover):not(:focus-within) .bro-svc-item__toc-row--head {
    display: none;
  }
  .bro-svc-item__toc:not(:hover):not(:focus-within) .bro-svc-item__toc-title,
  .bro-svc-item__toc:not(:hover):not(:focus-within) .bro-svc-item__toc-text {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease 0s;
  }
  .bro-svc-item__toc:not(:hover):not(:focus-within) .bro-svc-item__toc-text {
    flex: 0 0 0;
    max-width: 0;
    min-width: 0;
    width: 0;
    overflow: hidden;
  }
  .bro-svc-item__toc:not(:hover):not(:focus-within) .bro-svc-item__toc-row {
    grid-template-columns: 0 auto;
    column-gap: 0;
    justify-items: center;
  }
  .bro-svc-item__toc:not(:hover):not(:focus-within) .bro-svc-item__toc-row--head {
    min-height: 0;
  }
  .bro-svc-item__toc:not(:hover):not(:focus-within) .bro-svc-item__toc-link {
    justify-content: flex-start;
    gap: 0;
    max-height: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease 0s;
  }
  .bro-svc-item__toc:not(:hover):not(:focus-within) .bro-svc-item__toc-grid-corner {
    width: 0;
    min-width: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .bro-svc-item__toc:not(:hover):not(:focus-within) .bro-svc-item__toc-dot-trigger:not(.is-active) .bro-svc-item__toc-dot {
    background: rgba(0, 0, 0, 0.42);
    box-shadow: none;
  }
  .bro-svc-item__toc:not(:hover):not(:focus-within) .bro-svc-item__toc-dot-trigger:not(:last-of-type)::after {
    background: rgba(0, 0, 0, 0.32);
  }
  .bro-svc-item__toc:not(:hover):not(:focus-within) .bro-svc-item__toc-title {
    max-height: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
    transition: opacity 0.1s ease 0s, max-height 0.2s ease 0.14s, margin 0.2s ease 0.14s;
  }
}
@media (min-width: 1024px) {
  @media not all and (hover: hover) and (pointer: fine) {
    .bro-svc-item__toc {
      max-width: min(clamp(27rem, 1.9417475728vw + 26.2718446602rem, 31.1650485437rem), 100vw - 32px);
      border-radius: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
      overflow-x: hidden;
      overflow-y: auto;
    }
    .bro-svc-item__toc .bro-svc-item__toc-title,
    .bro-svc-item__toc .bro-svc-item__toc-text {
      opacity: 1;
      pointer-events: auto;
    }
    .bro-svc-item__toc .bro-svc-item__toc-text {
      flex: 1;
      min-width: 0;
      max-width: none;
    }
    .bro-svc-item__toc .bro-svc-item__toc-grid {
      width: auto;
      min-width: 0;
      overflow: visible;
    }
    .bro-svc-item__toc .bro-svc-item__toc-link {
      justify-content: flex-start;
    }
    .bro-svc-item__toc .bro-svc-item__toc-title {
      max-height: none;
      opacity: 1;
      margin: 0 0 clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem);
    }
  }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .bro-svc-item__toc {
    transition: none !important;
    max-width: min(clamp(27rem, 1.9417475728vw + 26.2718446602rem, 31.1650485437rem), 100vw - 32px) !important;
    border-radius: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem) !important;
    overflow-y: auto !important;
  }
  .bro-svc-item__toc .bro-svc-item__toc-inner {
    transition: none !important;
  }
  .bro-svc-item__toc .bro-svc-item__toc-title,
  .bro-svc-item__toc .bro-svc-item__toc-text,
  .bro-svc-item__toc .bro-svc-item__toc-link {
    transition: none !important;
  }
  .bro-svc-item__toc .bro-svc-item__toc-title,
  .bro-svc-item__toc .bro-svc-item__toc-text {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .bro-svc-item__toc .bro-svc-item__toc-text {
    flex: 1 !important;
    max-width: none !important;
  }
  .bro-svc-item__toc .bro-svc-item__toc-grid {
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .bro-svc-item__toc .bro-svc-item__toc-title {
    max-height: none !important;
    opacity: 1 !important;
    margin: 0 0 clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem) !important;
  }
}
.bro-svc-item__toc-inner {
  position: relative;
  z-index: 1;
  padding: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2776699029rem) clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2776699029rem);
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .bro-svc-item__toc-inner {
    transition: padding 0.45s cubic-bezier(0.33, 1, 0.32, 1) 0s;
  }
  .bro-svc-item__toc:hover .bro-svc-item__toc-inner, .bro-svc-item__toc:focus-within .bro-svc-item__toc-inner {
    padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem) clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  }
}
@media (min-width: 1024px) {
  @media not all and (hover: hover) and (pointer: fine) {
    .bro-svc-item__toc-inner {
      padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem) clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
    }
  }
}
.bro-svc-item__toc-section {
  position: relative;
  margin: 0;
}
.bro-svc-item__toc-bg-shape {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* 방사형·비대칭 그라데이션은 모서리에서 끊겨 보임 — 톤만 균일하게 */
  pointer-events: none;
  z-index: 0;
}
.bro-svc-item__toc-align, .bro-svc-item__toc-body {
  position: relative;
  z-index: 1;
}
.bro-svc-item__toc-links-wrap {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  position: relative;
}
.bro-svc-item__toc-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(0.2rem, 0.1941747573vw + 0.127184466rem, 0.6165048544rem);
  --bro-toc-grid-row-gap: clamp(0.2rem, 0.1941747573vw + 0.127184466rem, 0.6165048544rem);
  margin: 0;
  padding: 0;
  min-width: 0;
}
.bro-svc-item__toc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  align-content: center;
  column-gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  min-width: 0;
}
.bro-svc-item__toc-row--head {
  display: grid;
  align-items: end;
}
.bro-svc-item__toc-grid-corner {
  min-width: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.9106796117rem);
  min-height: 0.1rem;
}
.bro-svc-item__toc-title {
  display: block;
  margin: 0;
  padding: 0;
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1388349515rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.42);
  overflow: hidden;
}
.bro-svc-item__toc-title::after {
  content: ":";
}
.bro-svc-item__toc-dot-trigger {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.9106796117rem);
  min-width: clamp(2.8rem, 0.5177993528vw + 2.6058252427rem, 3.9106796117rem);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bro-svc-item__toc-dot-trigger:focus-visible {
  outline: 2px solid rgba(13, 53, 114, 0.35);
  outline-offset: 2px;
  border-radius: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6776699029rem);
}
.bro-svc-item__toc-dot-trigger:not(:last-of-type)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 1px;
  transform: translateX(-50%);
  height: calc(100% + var(--bro-toc-grid-row-gap));
  background: rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .bro-svc-item .bro-svc-item__toc-inner {
    transition: none !important;
  }
}
.bro-svc-item__toc-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  padding: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8776699029rem) clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem) clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8776699029rem) 0;
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3388349515rem);
  font-weight: 600;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.58);
  text-decoration: none;
  transition: color 0.2s ease;
}
.bro-svc-item__toc-link:hover {
  color: #111;
}
.bro-svc-item__toc-link.is-active {
  color: var(--clr-primary-main);
}
.bro-svc-item__toc-link:focus-visible {
  outline: 2px solid rgba(13, 53, 114, 0.35);
  outline-offset: 2px;
  border-radius: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6776699029rem);
}
.bro-svc-item__toc-text {
  flex: 1;
  min-width: 0;
  text-align: left;
  word-break: keep-all;
}
.bro-svc-item__toc-dot {
  display: block;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0;
  border-radius: 50%;
  font-style: normal;
  background: rgba(0, 0, 0, 0.38);
  box-shadow: 0 0 0 2px #fff;
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.bro-svc-item__toc-dot-trigger.is-active .bro-svc-item__toc-dot {
  width: 0.625rem;
  height: 0.625rem;
  background: var(--clr-primary-main);
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(13, 53, 114, 0.22);
}
.bro-svc-item__primary {
  min-width: 0;
}
.bro-svc-item__section {
  scroll-margin-top: calc(var(--header-height) + clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 3.2660194175rem));
}
.bro-svc-item__intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, 0.85fr);
  gap: clamp(4.8rem, 3.1067961165vw + 3.6349514563rem, 11.4640776699rem);
  align-items: start;
}
@media (max-width: 768px) {
  .bro-svc-item__intro-grid {
    grid-template-columns: 1fr;
  }
}
.bro-svc-item__section-heading {
  margin: 0 0 clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.9106796117rem);
  font-size: clamp(2.2rem, 0.6472491909vw + 1.9572815534rem, 3.5883495146rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #111;
}
.bro-svc-item__intro-fallback {
  margin: 0;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  color: rgba(0, 0, 0, 0.55);
}
.bro-svc-item__intro-media {
  margin: 0;
  position: sticky;
  top: calc(var(--header-height) + 2rem);
}
@media (max-width: 768px) {
  .bro-svc-item__intro-media {
    position: static;
  }
}
.bro-svc-item__intro-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem);
  object-fit: cover;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
}
.bro-svc-item__body--html {
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  line-height: 1.85;
  color: rgba(0, 0, 0, 0.78);
  word-break: keep-all;
  /* 제목 계층 (에디터 HTML: h1~h3 혼용) */
  /* Quill 빈 줄 <p><br></p> — :has 미지원 시에도 p:empty로 일부 보완 */
  /* Quill: bullet를 ol로 내보낼 때 — li 단위로 불릿 (:has 미지원 브라우저 대비) */
  /* :has 지원 시 ol 전체를 불릿 목록으로 통일 */
  /* Quill 편집기용 빈 핸들, 공개 페이지에서는 숨김 */
}
.bro-svc-item__body--html h1,
.bro-svc-item__body--html h2,
.bro-svc-item__body--html h3,
.bro-svc-item__body--html h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.32;
  color: #111;
}
.bro-svc-item__body--html h1 {
  margin: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4.4660194175rem) 0 clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2.2330097087rem);
  font-size: clamp(2.2rem, 0.5177993528vw + 2.0058252427rem, 3.3106796117rem);
}
.bro-svc-item__body--html h2 {
  margin: clamp(2.6rem, 0.6472491909vw + 2.3572815534rem, 3.9883495146rem) 0 clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 2.0330097087rem);
  font-size: clamp(1.9rem, 0.3236245955vw + 1.7786407767rem, 2.5941747573rem);
}
.bro-svc-item__body--html h3 {
  margin: clamp(2.2rem, 0.5177993528vw + 2.0058252427rem, 3.3106796117rem) 0 clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  font-size: clamp(1.7rem, 0.2588996764vw + 1.6029126214rem, 2.2553398058rem);
}
.bro-svc-item__body--html h4 {
  margin: clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.9106796117rem) 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  font-size: clamp(1.5rem, 0.1294498382vw + 1.4514563107rem, 1.7776699029rem);
  font-weight: 400;
}
.bro-svc-item__body--html h1:first-child,
.bro-svc-item__body--html h2:first-child,
.bro-svc-item__body--html h3:first-child,
.bro-svc-item__body--html h4:first-child {
  margin-top: 0;
}
.bro-svc-item__body--html h1 + h2,
.bro-svc-item__body--html h2 + h3,
.bro-svc-item__body--html h3 + h4 {
  margin-top: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
}
.bro-svc-item__body--html h1 strong,
.bro-svc-item__body--html h2 strong,
.bro-svc-item__body--html h3 strong,
.bro-svc-item__body--html h4 strong {
  font-weight: inherit;
}
.bro-svc-item__body--html p {
  margin: 0 0 clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2.2330097087rem);
}
.bro-svc-item__body--html p:last-child {
  margin-bottom: 0;
}
.bro-svc-item__body--html p:empty {
  margin: 0 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  min-height: 0;
}
.bro-svc-item__body--html p:has(> br:only-child) {
  margin: 0 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
}
.bro-svc-item__body--html strong,
.bro-svc-item__body--html b {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.9);
}
.bro-svc-item__body--html em,
.bro-svc-item__body--html i {
  font-style: italic;
}
.bro-svc-item__body--html u {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.bro-svc-item__body--html blockquote {
  margin: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2.2330097087rem) 0;
  padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem) clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  border-left: 3px solid rgba(13, 53, 114, 0.35);
  background: rgba(13, 53, 114, 0.04);
  font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5776699029rem);
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.72);
}
.bro-svc-item__body--html blockquote p:last-child {
  margin-bottom: 0;
}
.bro-svc-item__body--html ul,
.bro-svc-item__body--html ol {
  margin: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem) 0 clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem);
  padding-left: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
}
.bro-svc-item__body--html ul {
  list-style-type: disc;
  list-style-position: outside;
}
.bro-svc-item__body--html ol {
  list-style-type: decimal;
  list-style-position: outside;
}
.bro-svc-item__body--html li[data-list=bullet] {
  list-style-type: disc;
}
.bro-svc-item__body--html ol:has(li[data-list=bullet]) {
  list-style: disc outside;
  padding-left: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
}
.bro-svc-item__body--html .ql-ui {
  display: none;
}
.bro-svc-item__body--html li {
  margin: 0 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  padding-left: 0.15em;
  line-height: 1.7;
}
.bro-svc-item__body--html li:last-child {
  margin-bottom: 0;
}
.bro-svc-item__body--html li > p {
  margin: 0 0 clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8776699029rem);
}
.bro-svc-item__body--html li > p:last-child {
  margin-bottom: 0;
}
.bro-svc-item__body--html ul ul,
.bro-svc-item__body--html ol ol,
.bro-svc-item__body--html ul ol,
.bro-svc-item__body--html ol ul {
  margin-top: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem);
  margin-bottom: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem);
}
.bro-svc-item__body--html a {
  color: var(--clr-primary-main);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.bro-svc-item__body--html a:hover {
  color: var(--clr-primary-900);
}
.bro-svc-item__offerings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2.2330097087rem);
}
@media (max-width: 1024px) {
  .bro-svc-item__offerings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 544px) {
  .bro-svc-item__offerings-grid {
    grid-template-columns: 1fr;
  }
}
.bro-svc-item__offering-card {
  margin: 0;
  padding: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem);
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.bro-svc-item__offering-text {
  margin: 0;
  word-break: keep-all;
}
.bro-svc-item__offering-title {
  margin: 0 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  font-size: clamp(1.5rem, 0.1294498382vw + 1.4514563107rem, 1.7776699029rem);
  font-weight: 400;
  line-height: 1.35;
  color: rgba(0, 0, 0, 0.92);
  letter-spacing: -0.02em;
}
.bro-svc-item__offering-body {
  margin: 0;
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5388349515rem);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.76);
}
.bro-svc-item__offering-body br {
  line-height: inherit;
}

@keyframes bro-svc-orb-orbit-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes bro-svc-orb-img-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Service Item — 심층 본문 블록 (에디터 HTML 계약: docs/service-item-deep-content-format.md) */
.bro-svc-item__section--deep {
  scroll-margin-top: calc(var(--header-height) + clamp(1.6rem, 0.7766990291vw + 1.3087378641rem, 3.2660194175rem));
}

.bro-svc-deep {
  width: 100%;
  max-width: 100%;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.78);
  word-break: keep-all;
  /* 섹션 h2를 본문 블록 안에 두어 KPI/그리드와 좌측 기준선 통일 */
  /* 스텝 카드: 반응형 그리드 + 좌측 액센트 + 호버 */
  /* 미니 블록이 2~3개일 때만 카드 안 가로 분할(1개면 항상 전체 폭) */
  /* 대표 특징: 제목 + ul (비교 아님) */
  /* 역량·특징 (프로세스 스텝과 구분 — 2열 그리드, 상단 액센트) */
  /* 테마·대항목: 2열 카드 — 내부는 중첩 카드 없이 ul/li */
  /* 운영원칙 비교: 열 헤더 + 행별 말풍선 (제목/본문 분리) */
}
.bro-svc-deep__page-title {
  margin: 0 0 clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.9106796117rem);
  width: 100%;
  max-width: none;
  padding-left: 0;
  text-align: left;
}
.bro-svc-deep__eyebrow {
  margin: 0 0 clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem);
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1388349515rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}
.bro-svc-deep__wordmark {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  margin: 0 0 clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem);
  font-size: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #0d3572;
}
.bro-svc-deep__wordmark-line {
  display: block;
}
.bro-svc-deep__title {
  margin: 0 0 clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 2.0330097087rem);
  font-size: clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.3553398058rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: #111;
}
.bro-svc-deep__title--step {
  margin: 0;
  font-size: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.6330097087rem);
}
.bro-svc-deep__subtitle {
  margin: 0 0 clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem);
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5388349515rem);
  font-weight: 400;
  color: #111;
}
.bro-svc-deep__text {
  margin: 0 0 clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  color: rgba(0, 0, 0, 0.72);
}
.bro-svc-deep__text:last-child {
  margin-bottom: 0;
}
.bro-svc-deep__lead {
  margin: 0 0 clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.9106796117rem);
  font-size: clamp(1.5rem, 0.1294498382vw + 1.4514563107rem, 1.7776699029rem);
  font-weight: 400;
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.78);
}
.bro-svc-deep__closing {
  margin: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem) 0 0;
  padding-top: 0;
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5388349515rem);
  font-weight: 400;
  line-height: 1.75;
  color: rgba(0, 0, 0, 0.62);
}
.bro-svc-deep__kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  margin: 0 0 clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.6330097087rem);
  width: 100%;
  align-items: stretch;
}
@media (max-width: 768px) {
  .bro-svc-deep__kpi-strip {
    grid-template-columns: 1fr;
  }
}
.bro-svc-deep__kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: clamp(9.2rem, 1.0355987055vw + 8.8116504854rem, 11.4213592233rem);
  height: 100%;
  padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem) clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  border-radius: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2776699029rem);
  border: 1px solid rgba(13, 53, 114, 0.12);
  background: linear-gradient(145deg, rgba(13, 53, 114, 0.04), rgba(255, 255, 255, 0.9));
  text-align: center;
}
.bro-svc-deep__kpi-card .bro-svc-deep__kpi-line + .bro-svc-deep__kpi-line {
  margin-top: 0.12em;
}
.bro-svc-deep__kpi-line {
  display: block;
  max-width: 100%;
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3388349515rem);
  font-weight: 400;
  line-height: 1.3;
  color: #0d3572;
}
.bro-svc-deep__list {
  margin: 0 0 clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  padding-left: 1.15rem;
  list-style: disc;
}
.bro-svc-deep__list li {
  margin-bottom: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8776699029rem);
}
.bro-svc-deep__list li::marker {
  color: rgba(13, 53, 114, 0.45);
}
.bro-svc-deep__list--compact {
  list-style: none;
  padding-left: 0;
}
.bro-svc-deep__list--compact li {
  position: relative;
  padding-left: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  margin-bottom: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem);
}
.bro-svc-deep__list--compact li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--clr-primary-main);
}
.bro-svc-deep__list--ordered {
  list-style: decimal;
  padding-left: 1.35rem;
}
.bro-svc-deep__list--nested {
  margin-top: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8776699029rem);
  margin-bottom: 0;
}
.bro-svc-deep__list:last-child {
  margin-bottom: 0;
}
.bro-svc-deep__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem);
  margin: 0 0 clamp(2.2rem, 0.5177993528vw + 2.0058252427rem, 3.3106796117rem);
  padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem) clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  border-radius: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  background: rgba(13, 53, 114, 0.05);
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  font-weight: 400;
  color: #0d3572;
  text-align: center;
}
.bro-svc-deep__flow-arrow {
  opacity: 0.45;
  font-weight: 400;
}
.bro-svc-deep__flow-line {
  margin: 0 0 clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
}
.bro-svc-deep__steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  margin: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem) 0 clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 4.0660194175rem);
  width: 100%;
  /* 카드 최소 폭을 넉넉히 — 4열 초박열 방지, 설명 줄폭 확보 */
}
@media (min-width: 768px) {
  .bro-svc-deep__steps-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(30rem, 5.1779935275vw + 28.0582524272rem, 41.1067961165rem)), 1fr));
  }
}
.bro-svc-deep__steps-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
  .bro-svc-deep__steps-grid--cols-2 {
    grid-template-columns: 1fr;
  }
}
.bro-svc-deep__steps-grid .bro-svc-deep__step {
  margin-bottom: 0;
  height: 100%;
}
.bro-svc-deep__step {
  position: relative;
  margin-bottom: clamp(2.2rem, 0.6472491909vw + 1.9572815534rem, 3.5883495146rem);
  padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem) clamp(2rem, 0.3883495146vw + 1.854368932rem, 2.8330097087rem) clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem) clamp(2.2rem, 0.5177993528vw + 2.0058252427rem, 3.3106796117rem);
  border-radius: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  border: 1px solid rgba(13, 53, 114, 0.1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 12px 36px rgba(13, 53, 114, 0.06), 0 4px 14px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.bro-svc-deep__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem) 0 0 clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  background: linear-gradient(180deg, var(--clr-primary-main), rgba(13, 53, 114, 0.55));
}
@media (hover: hover) {
  .bro-svc-deep__step:hover {
    border-color: rgba(13, 53, 114, 0.22);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 48px rgba(13, 53, 114, 0.1), 0 8px 22px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
  }
}
.bro-svc-deep__step:last-child {
  margin-bottom: 0;
}
.bro-svc-deep__step-head {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem);
  margin-bottom: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  padding-bottom: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  border-bottom: 1px solid rgba(13, 53, 114, 0.08);
}
.bro-svc-deep__step-badge {
  align-self: flex-start;
  padding: clamp(0.4rem, 0.0647249191vw + 0.3757281553rem, 0.5388349515rem) clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  border-radius: 999px;
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1388349515rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--clr-primary-main), var(--clr-primary-700, #0a2855));
  box-shadow: 0 2px 8px rgba(13, 53, 114, 0.25);
}
.bro-svc-deep__step-body {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem);
}
@media (min-width: 1024px) {
  .bro-svc-deep__step-body--split-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.4rem, 0.3883495146vw + 1.254368932rem, 2.2330097087rem);
  }
}
@media (min-width: 1024px) {
  .bro-svc-deep__step-body--split-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.2rem, 0.3883495146vw + 1.054368932rem, 2.0330097087rem);
  }
}
.bro-svc-deep__mini {
  margin: 0;
  min-width: 0;
}
.bro-svc-deep__mini .bro-svc-deep__subtitle {
  color: #0d3572;
}
.bro-svc-deep__features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.9106796117rem);
  margin: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem) 0 clamp(2.2rem, 0.6472491909vw + 1.9572815534rem, 3.5883495146rem);
  width: 100%;
}
@media (min-width: 768px) {
  .bro-svc-deep__features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.bro-svc-deep__feature-card {
  box-sizing: border-box;
  padding: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.6330097087rem) clamp(1.8rem, 0.2588996764vw + 1.7029126214rem, 2.3553398058rem);
  border-radius: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  border: 1px solid rgba(13, 53, 114, 0.12);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.92));
  box-shadow: 0 8px 28px rgba(13, 53, 114, 0.06);
}
.bro-svc-deep__title--feature {
  margin: 0 0 clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  font-size: clamp(1.6rem, 0.1941747573vw + 1.527184466rem, 2.0165048544rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: #111;
}
.bro-svc-deep__list--feature {
  margin: 0;
  padding-left: 1.2rem;
  list-style: disc;
}
.bro-svc-deep__list--feature li {
  margin-bottom: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem);
  line-height: 1.65;
  color: rgba(0, 0, 0, 0.76);
}
.bro-svc-deep__list--feature li:last-child {
  margin-bottom: 0;
}
.bro-svc-deep__list--feature li::marker {
  color: rgba(13, 53, 114, 0.45);
}
.bro-svc-deep__capabilities-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  margin: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem) 0 clamp(2.6rem, 0.6472491909vw + 2.3572815534rem, 3.9883495146rem);
  width: 100%;
}
@media (min-width: 768px) {
  .bro-svc-deep__capabilities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.bro-svc-deep__capability-card {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem) clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.5553398058rem) clamp(2.2rem, 0.5177993528vw + 2.0058252427rem, 3.3106796117rem);
  border-radius: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  border: 1px solid rgba(13, 53, 114, 0.1);
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 36px rgba(13, 53, 114, 0.07);
}
.bro-svc-deep__title--capability {
  margin: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8776699029rem) 0 clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  font-size: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.38;
  color: #0d1a2e;
}
.bro-svc-deep__list--capability {
  margin: 0;
  padding-left: 1.15rem;
  list-style: disc;
}
.bro-svc-deep__list--capability li {
  margin-bottom: clamp(0.8rem, 0.1941747573vw + 0.727184466rem, 1.2165048544rem);
  line-height: 1.68;
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5388349515rem);
  color: rgba(0, 0, 0, 0.74);
}
.bro-svc-deep__list--capability li:last-child {
  margin-bottom: 0;
}
.bro-svc-deep__list--capability li::marker {
  color: var(--clr-primary-main);
}
.bro-svc-deep__stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  margin: clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.9106796117rem) 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
}
@media (max-width: 768px) {
  .bro-svc-deep__stat-grid {
    grid-template-columns: 1fr;
  }
}
.bro-svc-deep__stat {
  padding: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem) clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  border-radius: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2776699029rem);
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.04);
}
.bro-svc-deep__stat-label {
  margin: 0 0 clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6776699029rem);
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2388349515rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
}
.bro-svc-deep__stat-value {
  margin: 0 0 clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6776699029rem);
  font-size: clamp(2.2rem, 0.3883495146vw + 2.054368932rem, 3.0330097087rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #0d3572;
}
.bro-svc-deep__stat-desc {
  margin: 0;
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3388349515rem);
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.55);
}
.bro-svc-deep__pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem);
  margin: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem) 0 clamp(2rem, 0.3883495146vw + 1.854368932rem, 2.8330097087rem);
}
.bro-svc-deep__pill {
  display: inline-flex;
  align-items: center;
  padding: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8776699029rem) clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  border-radius: 999px;
  border: 1px solid rgba(13, 53, 114, 0.2);
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3388349515rem);
  font-weight: 400;
  color: #0d3572;
  background: rgba(255, 255, 255, 0.9);
}
.bro-svc-deep__blocks-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.9106796117rem);
  width: 100%;
  margin-top: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem);
  align-items: stretch;
}
@media (min-width: 768px) {
  .bro-svc-deep__blocks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.bro-svc-deep__blocks-grid .bro-svc-deep__block {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0;
  padding: clamp(2rem, 0.3883495146vw + 1.854368932rem, 2.8330097087rem) clamp(2rem, 0.2588996764vw + 1.9029126214rem, 2.5553398058rem);
  border-radius: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  border: 1px solid rgba(13, 53, 114, 0.1);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 253, 0.96));
  box-shadow: 0 6px 26px rgba(13, 53, 114, 0.06);
}
.bro-svc-deep__block {
  margin-bottom: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 4.0660194175rem);
}
.bro-svc-deep__block:last-child {
  margin-bottom: 0;
}
.bro-svc-deep__title--theme-block {
  margin: 0 0 clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  font-size: clamp(1.7rem, 0.2588996764vw + 1.6029126214rem, 2.2553398058rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: #0f1724;
}
.bro-svc-deep__flow-line--block {
  margin-top: 0;
  margin-bottom: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  color: rgba(13, 53, 114, 0.82);
}
.bro-svc-deep__index {
  margin-right: 0.25em;
  color: var(--clr-primary-main);
}
.bro-svc-deep__block-list {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 0;
}
.bro-svc-deep__block-list-item {
  margin: 0;
  padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem) 0;
  border-top: 1px solid rgba(13, 53, 114, 0.1);
}
.bro-svc-deep__block-list-item:first-child {
  border-top: none;
  padding-top: 0;
}
.bro-svc-deep__block-list-item:last-child {
  padding-bottom: 0;
}
.bro-svc-deep__block-list-label {
  display: block;
  margin: 0 0 clamp(0.5rem, 0.1294498382vw + 0.4514563107rem, 0.7776699029rem);
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: #0d3572;
}
.bro-svc-deep__block-list-body {
  display: block;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  font-weight: 400;
  line-height: 1.68;
  color: rgba(0, 0, 0, 0.76);
}
.bro-svc-deep__compare-deck-heads {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 0.5177993528vw + 1.0058252427rem, 2.3106796117rem);
  margin: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem) 0 clamp(1.8rem, 0.5177993528vw + 1.6058252427rem, 2.9106796117rem);
  padding-bottom: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  border-bottom: 1px solid rgba(13, 53, 114, 0.12);
}
@media (max-width: 768px) {
  .bro-svc-deep__compare-deck-heads {
    grid-template-columns: 1fr;
  }
}
.bro-svc-deep__compare-deck-head {
  margin: 0;
  font-size: clamp(1.5rem, 0.2588996764vw + 1.4029126214rem, 2.0553398058rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: #121820;
}
.bro-svc-deep__compare-deck-head--pain {
  text-align: left;
}
.bro-svc-deep__compare-deck-head--solution {
  text-align: right;
  color: #0d3572;
}
@media (max-width: 768px) {
  .bro-svc-deep__compare-deck-head--solution {
    text-align: left;
  }
}
.bro-svc-deep__compare-row {
  margin: 0 0 clamp(2.2rem, 0.7766990291vw + 1.9087378641rem, 3.8660194175rem);
  min-width: 0;
}
.bro-svc-deep__compare-row:last-child {
  margin-bottom: 0;
}
.bro-svc-deep__compare-row__kicker {
  margin: 0 0 clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  font-size: clamp(1.3rem, 0.1941747573vw + 1.227184466rem, 1.7165048544rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(13, 53, 114, 0.72);
}
.bro-svc-deep__compare-row__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 0.5177993528vw + 1.2058252427rem, 2.5106796117rem);
  align-items: stretch;
}
@media (max-width: 768px) {
  .bro-svc-deep__compare-row__grid {
    grid-template-columns: 1fr;
    gap: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.6330097087rem);
  }
}
.bro-svc-deep__compare-bubble {
  display: grid;
  min-width: 0;
  height: 100%;
  min-height: 100%;
  align-self: stretch;
  align-items: stretch;
}
.bro-svc-deep__compare-bubble--pain {
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
}
.bro-svc-deep__compare-bubble--solution {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
}
.bro-svc-deep__compare-bubble__aside {
  flex-shrink: 0;
  align-self: center;
}
.bro-svc-deep__compare-bubble__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 5.1106796117rem);
  height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 5.1106796117rem);
  border-radius: 50%;
  box-sizing: border-box;
}
.bro-svc-deep__compare-bubble__icon--user {
  background: #c2c2c2;
  border: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.bro-svc-deep__compare-bubble__icon--user lord-icon {
  width: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 5.1106796117rem);
  height: clamp(4rem, 0.5177993528vw + 3.8058252427rem, 5.1106796117rem);
}
.bro-svc-deep__compare-bubble__icon--brand {
  background: #0a0c10;
  color: #fff;
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1388349515rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.bro-svc-deep__compare-bubble__shell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  min-height: 100%;
  height: 100%;
  padding: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem) clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.6330097087rem);
  border-radius: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  box-sizing: border-box;
}
.bro-svc-deep__compare-bubble--pain .bro-svc-deep__compare-bubble__shell {
  background: #e8ecf2;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
}
.bro-svc-deep__compare-bubble--pain .bro-svc-deep__compare-bubble__shell::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  border: 7px solid transparent;
  border-right-color: #e8ecf2;
  filter: drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.04));
}
@media (max-width: 768px) {
  .bro-svc-deep__compare-bubble--pain .bro-svc-deep__compare-bubble__shell::after {
    display: none;
  }
}
.bro-svc-deep__compare-bubble--solution .bro-svc-deep__compare-bubble__shell {
  color: #fff;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, transparent 42%), linear-gradient(155deg, #1a2436 0%, #0a0e14 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.bro-svc-deep__compare-bubble--solution .bro-svc-deep__compare-bubble__shell::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  border: 7px solid transparent;
  border-left-color: #1a2436;
  filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.15));
}
@media (max-width: 768px) {
  .bro-svc-deep__compare-bubble--solution .bro-svc-deep__compare-bubble__shell::after {
    display: none;
  }
}
.bro-svc-deep__compare-bubble__shell--solo .bro-svc-deep__compare-bubble__desc {
  font-size: clamp(1.5rem, 0.1941747573vw + 1.427184466rem, 1.9165048544rem);
  line-height: 1.72;
}
.bro-svc-deep__compare-bubble__title {
  margin: 0 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  flex-shrink: 0;
  font-size: clamp(1.7rem, 0.3236245955vw + 1.5786407767rem, 2.3941747573rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.35;
}
.bro-svc-deep__compare-bubble--pain .bro-svc-deep__compare-bubble__title {
  color: #0a0f18;
}
.bro-svc-deep__compare-bubble--solution .bro-svc-deep__compare-bubble__title {
  color: #fff;
}
.bro-svc-deep__compare-bubble__desc {
  margin: 0;
  flex: 1 1 auto;
  font-size: clamp(1.4rem, 0.1941747573vw + 1.327184466rem, 1.8165048544rem);
  font-weight: 400;
  line-height: 1.72;
}
.bro-svc-deep__compare-bubble--pain .bro-svc-deep__compare-bubble__desc {
  color: rgba(0, 0, 0, 0.76);
}
.bro-svc-deep__compare-bubble--solution .bro-svc-deep__compare-bubble__desc {
  color: rgba(255, 255, 255, 0.9);
}
.bro-svc-deep__tech-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  margin: 0 0 clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.6330097087rem);
  align-items: start;
}
@media (max-width: 768px) {
  .bro-svc-deep__tech-hero {
    grid-template-columns: 1fr;
  }
}
.bro-svc-deep__tech-stack {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  font-size: clamp(1.8rem, 0.3883495146vw + 1.654368932rem, 2.6330097087rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #111;
}

/* Team — OUR PEOPLE, 검색 바, 카드(좌 텍스트·우 사진 50/50), sm+ 목록 2열 + 호버 오버레이 */
.bro-team-main {
  padding: 0;
  margin: 0;
  background: var(--clr-gray-50);
  color: var(--clr-gray-900);
}

.bro-team {
  font-family: var(--family-kr), var(--family-base), sans-serif;
  overflow-x: clip;
  /* 사진 없음: 우측란 검정 + 작은 로고 */
  /* 경력(hover_lines) 없는 카드는 캡션 유지 — 오버레이만 있는 카드에서만 호버 시 전환 */
}
.bro-team a {
  color: inherit;
}
.bro-team__inner {
  padding-bottom: clamp(5.6rem, 2.5889967638vw + 4.6291262136rem, 11.1533980583rem);
  max-width: 128rem;
}
.bro-team__page-head {
  text-align: center;
}
.bro-team__kicker {
  margin: 0 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  font-size: clamp(1.1rem, 0.1294498382vw + 1.0514563107rem, 1.3776699029rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-gray-500);
}
.bro-team__title {
  margin: 0;
  font-size: clamp(2.8rem, 1.0355987055vw + 2.4116504854rem, 5.0213592233rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--clr-gray-900);
}
.bro-team__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
}
@media (min-width: 768px) {
  .bro-team__toolbar {
    flex-wrap: nowrap;
  }
}
.bro-team__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  flex: 0 1 auto;
  min-width: 0;
  /* md 이하: 두 셀렉트를 1fr·1fr로 채워 우측 여백 제거 (sm 단독이면 544px만 적용되어 md로 통일) */
}
@media (max-width: 768px) {
  .bro-team__filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 1 100%;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .bro-team__filters {
    display: flex;
    flex-wrap: nowrap;
    width: auto;
    flex: 0 1 auto;
  }
}
.bro-team__select-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: clamp(16rem, 2.5889967638vw + 15.0291262136rem, 21.5533980583rem);
  min-width: 0;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .bro-team__select-wrap {
    width: 100%;
  }
}
.bro-team__select-label {
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1388349515rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-gray-500);
}
.bro-team__select {
  appearance: none;
  width: 100%;
  min-height: clamp(4rem, 0.2588996764vw + 3.9029126214rem, 4.5553398058rem);
  padding: clamp(0.8rem, 0.0647249191vw + 0.7757281553rem, 0.9388349515rem) clamp(3rem, 0.2588996764vw + 2.9029126214rem, 3.5553398058rem) clamp(0.8rem, 0.0647249191vw + 0.7757281553rem, 0.9388349515rem) clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  border: 1px solid var(--clr-gray-300);
  border-radius: 0;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2364748b' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 10px 6px;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  font-weight: 400;
  color: var(--clr-gray-800);
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.2s ease;
}
.bro-team__select:hover {
  border-color: var(--clr-gray-400);
}
.bro-team__select:focus {
  outline: none;
}
.bro-team__select:focus-visible {
  outline: 2px solid var(--clr-primary-main);
  outline-offset: 2px;
}
@media (min-width: 768px) {
  .bro-team__filters ~ .bro-team__search-form {
    margin-left: auto;
    flex: 0 1 min(100%, 20rem);
  }
}
.bro-team__search-form {
  display: block;
  flex: 1 1 16rem;
  width: 100%;
  min-width: min(100%, 12rem);
  max-width: none;
  margin: 0;
}
@media (min-width: 768px) {
  .bro-team__search-form {
    flex: 1 1 40%;
    min-width: min(100%, 20rem);
  }
}
.bro-team__search-wrap {
  position: relative;
  width: 100%;
}
.bro-team__search-icon {
  position: absolute;
  left: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  color: var(--clr-gray-400);
  pointer-events: none;
}
.bro-team__search {
  width: 100%;
  min-height: clamp(4rem, 0.2588996764vw + 3.9029126214rem, 4.5553398058rem);
  padding: clamp(0.8rem, 0.0647249191vw + 0.7757281553rem, 0.9388349515rem) clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem) clamp(0.8rem, 0.0647249191vw + 0.7757281553rem, 0.9388349515rem) clamp(4rem, 0.2588996764vw + 3.9029126214rem, 4.5553398058rem);
  border: 1px solid var(--clr-gray-300);
  border-radius: 0;
  background: #fff;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  font-weight: 400;
  color: var(--clr-gray-900);
  box-sizing: border-box;
  box-shadow: none;
  transition: border-color 0.2s ease;
}
.bro-team__search::placeholder {
  color: var(--clr-gray-400);
}
.bro-team__search:hover {
  border-color: var(--clr-gray-400);
}
.bro-team__search:focus {
  outline: none;
}
.bro-team__search:focus-visible {
  outline: 2px solid var(--clr-primary-main);
  outline-offset: 2px;
}
.bro-team__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  list-style: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  /* PC·태블릿: 2열 (repeat(2, 1fr)) */
}
@media (min-width: 544px) {
  .bro-team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .bro-team__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4rem;
  }
}
.bro-team__cell {
  min-width: 0;
}
.bro-team__card {
  height: 100%;
}
.bro-team__card.is-hidden {
  display: none;
}
.bro-team__photo-wrap {
  position: relative;
  display: grid;
  /* 모바일·PC 공통: 좌 50% 텍스트(검정) + 우 50% 사진 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  aspect-ratio: 2/1;
  overflow: hidden;
  background: #000;
}
@media (min-width: 544px) {
  .bro-team__photo-wrap {
    aspect-ratio: 2.2/1;
  }
}
@media (min-width: 1024px) {
  .bro-team__photo-wrap {
    display: block;
    aspect-ratio: 4/5;
  }
}
.bro-team__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  grid-column: 2;
  grid-row: 1;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1024px) {
  .bro-team__photo {
    grid-column: auto;
    grid-row: auto;
  }
}
.bro-team__photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #000;
  grid-column: 2;
  grid-row: 1;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1024px) {
  .bro-team__photo-fallback {
    grid-column: auto;
    grid-row: auto;
  }
}
.bro-team__photo-fallback-logo {
  display: block;
  width: clamp(4rem, 1.0355987055vw + 3.6116504854rem, 6.2213592233rem);
  max-width: 42%;
  height: auto;
}
.bro-team__card:hover .bro-team__photo, .bro-team__card:focus-within .bro-team__photo, .bro-team__card:hover .bro-team__photo-fallback, .bro-team__card:focus-within .bro-team__photo-fallback {
  transform: scale(1.04);
}
.bro-team__gradient {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  /* 사진 열만 (우측 50%) */
  left: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 45%, transparent 72%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.35s ease;
}
@media (min-width: 1024px) {
  .bro-team__gradient {
    left: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.48) 34%, rgba(0, 0, 0, 0.12) 62%, transparent 100%);
  }
}
.bro-team__caption {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(1.2rem, 0.6472491909vw + 0.9572815534rem, 2.5883495146rem) clamp(1rem, 0.6472491909vw + 0.7572815534rem, 2.3883495146rem);
  color: #fff;
  background: #000;
  transition: opacity 0.3s ease;
}
@media (min-width: 1024px) {
  .bro-team__caption {
    position: absolute;
    inset: auto 0 0 0;
    align-self: auto;
    justify-content: flex-end;
    padding: 1.35rem 1.2rem 1.2rem;
    background: none;
  }
}
.bro-team__specialty {
  margin: 0 0 clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.9106796117rem);
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.92;
}
@media (min-width: 1024px) {
  .bro-team__specialty {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
  }
}
.bro-team__name {
  margin: 0 0 0.2em;
  font-size: clamp(1.8rem, 0.6472491909vw + 1.5572815534rem, 3.1883495146rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (min-width: 1024px) {
  .bro-team__name {
    font-size: clamp(1.8rem, 1.45vw, 2.35rem);
  }
}
.bro-team__role {
  margin: 0;
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  font-weight: 400;
  opacity: 0.9;
}
@media (min-width: 1024px) {
  .bro-team__role {
    font-size: 1.2rem;
  }
}
.bro-team__hover {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  padding: clamp(1.6rem, 0.3883495146vw + 1.454368932rem, 2.4330097087rem) clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  background: color-mix(in srgb, var(--clr-primary-800) 82%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
@media (min-width: 1024px) {
  .bro-team__hover {
    align-items: flex-end;
    padding: 1.35rem 1.2rem 1.2rem;
  }
}
.bro-team__hover-inner {
  width: 100%;
  max-height: 100%;
  overflow: auto;
}
.bro-team__hover-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem);
}
.bro-team__hover-item {
  font-size: clamp(1.1rem, 0.1294498382vw + 1.0514563107rem, 1.3776699029rem);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.96);
}
.bro-team__card--has-career:hover .bro-team__hover, .bro-team__card--has-career:focus-within .bro-team__hover {
  opacity: 1;
  pointer-events: auto;
}
.bro-team__card--has-career:hover .bro-team__gradient, .bro-team__card--has-career:focus-within .bro-team__gradient {
  opacity: 0;
}
.bro-team__card--has-career:hover .bro-team__caption, .bro-team__card--has-career:focus-within .bro-team__caption {
  opacity: 0;
}
.bro-team__empty {
  margin: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem) 0 0;
  text-align: center;
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5388349515rem);
  color: var(--clr-gray-600);
}
.bro-team__empty[hidden] {
  display: none;
}
.bro-team__pagination {
  display: flex;
  justify-content: center;
  margin-top: clamp(4.8rem, 3.1067961165vw + 3.6349514563rem, 11.4640776699rem);
}

/* News & Insights — 갤러리 2열 + 팀과 동일 툴바, 상세 3단 레이아웃 */
.bro-news-main {
  padding: 0;
  margin: 0;
  background: var(--clr-gray-50);
  color: var(--clr-gray-900);
}

.bro-news {
  font-family: var(--family-kr), var(--family-base), sans-serif;
  overflow-x: clip;
  /* —— Toolbar (bro-team 미니멀 툴바와 동일) —— */
}
.bro-news a {
  color: inherit;
  text-decoration: none;
}
.bro-news__inner {
  padding-bottom: clamp(5.6rem, 2.5889967638vw + 4.6291262136rem, 11.1533980583rem);
}
.bro-news__pagination {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 5.5766990291rem);
}
.bro-news__page-head {
  text-align: center;
}
.bro-news__kicker {
  margin: 0 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  font-size: clamp(1.1rem, 0.1294498382vw + 1.0514563107rem, 1.3776699029rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-gray-500);
}
.bro-news__title {
  margin: 0;
  font-size: clamp(2.2rem, 0.9061488673vw + 1.8601941748rem, 4.1436893204rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: var(--clr-gray-900);
}
.bro-news__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
}
@media (min-width: 768px) {
  .bro-news__toolbar {
    flex-wrap: nowrap;
  }
}
.bro-news__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  flex: 0 1 auto;
  min-width: 0;
}
@media (max-width: 768px) {
  .bro-news__filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 1 100%;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .bro-news__filters {
    display: flex;
    flex-wrap: nowrap;
    width: auto;
    flex: 0 1 auto;
  }
}
.bro-news__select-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: clamp(16rem, 2.5889967638vw + 15.0291262136rem, 21.5533980583rem);
  min-width: 0;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .bro-news__select-wrap {
    width: 100%;
  }
}
.bro-news__select-label {
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1388349515rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-gray-500);
}
.bro-news__select {
  appearance: none;
  width: 100%;
  min-height: clamp(4rem, 0.2588996764vw + 3.9029126214rem, 4.5553398058rem);
  padding: clamp(0.8rem, 0.0647249191vw + 0.7757281553rem, 0.9388349515rem) clamp(3rem, 0.2588996764vw + 2.9029126214rem, 3.5553398058rem) clamp(0.8rem, 0.0647249191vw + 0.7757281553rem, 0.9388349515rem) clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  border: 1px solid var(--clr-gray-300);
  border-radius: 0;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2364748b' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 10px 6px;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  font-weight: 400;
  color: var(--clr-gray-800);
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.2s ease;
}
.bro-news__select:hover {
  border-color: var(--clr-gray-400);
}
.bro-news__select:focus {
  outline: none;
}
.bro-news__select:focus-visible {
  outline: 2px solid var(--clr-primary-main);
  outline-offset: 2px;
}
@media (min-width: 768px) {
  .bro-news__filters ~ .bro-news__search-form {
    margin-left: auto;
    flex: 0 1 min(100%, 20rem);
  }
}
.bro-news__search-form {
  display: block;
  flex: 1 1 16rem;
  width: 100%;
  min-width: min(100%, 12rem);
  max-width: none;
  margin: 0;
}
@media (min-width: 768px) {
  .bro-news__search-form {
    flex: 1 1 40%;
    min-width: min(100%, 20rem);
  }
}
.bro-news__search-wrap {
  position: relative;
  width: 100%;
}
.bro-news__search-icon {
  position: absolute;
  left: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  color: var(--clr-gray-400);
  pointer-events: none;
}
.bro-news__search {
  width: 100%;
  min-height: clamp(4rem, 0.2588996764vw + 3.9029126214rem, 4.5553398058rem);
  padding: clamp(0.8rem, 0.0647249191vw + 0.7757281553rem, 0.9388349515rem) clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem) clamp(0.8rem, 0.0647249191vw + 0.7757281553rem, 0.9388349515rem) clamp(4rem, 0.2588996764vw + 3.9029126214rem, 4.5553398058rem);
  border: 1px solid var(--clr-gray-300);
  border-radius: 0;
  background: #fff;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  font-weight: 400;
  color: var(--clr-gray-900);
  box-sizing: border-box;
  box-shadow: none;
  transition: border-color 0.2s ease;
}
.bro-news__search::placeholder {
  color: var(--clr-gray-400);
}
.bro-news__search:hover {
  border-color: var(--clr-gray-400);
}
.bro-news__search:focus {
  outline: none;
}
.bro-news__search:focus-visible {
  outline: 2px solid var(--clr-primary-main);
  outline-offset: 2px;
}
.bro-news__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  list-style: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
@media (max-width: 768px) {
  .bro-news__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 544px) {
  .bro-news__grid {
    grid-template-columns: 1fr;
  }
}
.bro-news__cell {
  min-width: 0;
}
.bro-news__card {
  position: relative;
  height: 100%;
  background: #fff;
  border-radius: 0;
  border: 1px solid var(--clr-gray-200);
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.bro-news__card:hover {
  border-color: var(--clr-gray-300);
}
.bro-news__card.is-hidden {
  display: none;
}
.bro-news__card-link {
  display: block;
  padding: 0 0 clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  color: inherit;
}
.bro-news__thumb-wrap {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--clr-gray-200);
}
.bro-news__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.bro-news__card:hover .bro-news__thumb {
  transform: scale(1.03);
}
.bro-news__category {
  margin: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem) clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem) 0;
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2388349515rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bro-news__category--pe {
  color: #7c3aed;
}
.bro-news__category--brief {
  color: #0d9488;
}
.bro-news__category--strategy {
  color: #c2410c;
}
.bro-news__category--ma {
  color: #1d4ed8;
}
.bro-news__card-title {
  margin: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem) clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem) 0;
  font-size: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--clr-gray-900);
}
.bro-news__excerpt {
  margin: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem) clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem) 0;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  line-height: 1.65;
  color: var(--clr-gray-800);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bro-news__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.6rem, 0.2588996764vw + 0.5029126214rem, 1.1553398058rem);
  margin: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem) clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem) 0;
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3388349515rem);
  color: var(--clr-gray-800);
}
.bro-news__source {
  font-weight: 500;
  color: var(--clr-gray-900);
}
.bro-news__date {
  font-weight: 400;
  color: var(--clr-gray-800);
}
.bro-news__meta-sep {
  color: var(--clr-gray-600);
}
.bro-news__empty {
  margin: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem) 0 0;
  text-align: center;
  font-size: clamp(1.4rem, 0.0647249191vw + 1.3757281553rem, 1.5388349515rem);
  color: var(--clr-gray-600);
}
.bro-news__empty[hidden] {
  display: none;
}

/* —— Detail —— */
.bro-news-detail-main {
  padding: 0;
  margin: 0;
  background: #fff;
  color: var(--clr-gray-900);
}

.bro-news-detail {
  font-family: var(--family-kr), var(--family-base), sans-serif;
  overflow-x: clip;
  /* 히어로 이미지 아래: 제목 + 그리드를 하나의 no-container-xl(.bro-news-detail__article-wrap)로 묶어 좌우선 통일 */
  /* 히어로 제목: 가로폭은 no-container-* 유틸, 안쪽 여백은 .no-pd-* 유틸 */
}
.bro-news-detail a {
  color: inherit;
}
.bro-news-detail__hero {
  position: relative;
}
.bro-news-detail__hero-img-wrap {
  position: relative;
  max-height: min(52vh, 520px);
  overflow: hidden;
  background: #0f172a;
}
.bro-news-detail__hero-img {
  display: block;
  width: 100%;
  height: min(52vh, 520px);
  object-fit: cover;
}
.bro-news-detail__hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.55) 0%, transparent 55%);
  pointer-events: none;
}
.bro-news-detail__article-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(2.4rem, 0.7766990291vw + 2.1087378641rem, 4.0660194175rem);
  margin-top: clamp(-4.8rem, -1.5533980583vw - 4.2174757282rem, -8.132038835rem);
  padding-bottom: clamp(6.4rem, 2.071197411vw + 5.6233009709rem, 10.8427184466rem);
}
.bro-news-detail__title-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  background: #fff;
  border-radius: 0;
  border: 1px solid var(--clr-gray-200);
  box-shadow: none;
}
.bro-news-detail__category {
  margin: 0 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2388349515rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bro-news-detail__category--pe {
  color: #7c3aed;
}
.bro-news-detail__category--brief {
  color: #0d9488;
}
.bro-news-detail__category--strategy {
  color: #c2410c;
}
.bro-news-detail__category--ma {
  color: #1d4ed8;
}
.bro-news-detail__headline {
  margin: 0;
  font-size: clamp(2.2rem, 1.1650485437vw + 1.7631067961rem, 4.6990291262rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--clr-gray-900);
}
.bro-news-detail__intro {
  margin: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem) 0 0;
  font-size: clamp(1.4rem, 0.1941747573vw + 1.327184466rem, 1.8165048544rem);
  line-height: 1.7;
  color: var(--clr-gray-600);
}
.bro-news-detail__byline {
  margin: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem) 0 0;
  font-size: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  color: var(--clr-gray-500);
}
.bro-news-detail__authors {
  font-weight: 600;
  color: var(--clr-gray-700);
}
.bro-news-detail__sep {
  margin: 0 0.25em;
}
.bro-news-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(2rem, 1.0355987055vw + 1.6116504854rem, 4.2213592233rem);
  align-items: start;
  padding: 0;
  margin: 0;
}
@media (max-width: 1024px) {
  .bro-news-detail__layout {
    grid-template-columns: 1fr;
  }
}
.bro-news-detail__content-col {
  display: flex;
  flex-direction: column;
  gap: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4.4660194175rem);
  min-width: 0;
}
@media (max-width: 1024px) {
  .bro-news-detail__content-col {
    order: -1;
  }
}
.bro-news-detail__aside-title {
  margin: 0 0 clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2388349515rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-gray-500);
}
.bro-news-detail__aside-title--inline {
  margin: 0;
}
.bro-news-detail__authors-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
}
.bro-news-detail__author {
  display: grid;
  grid-template-columns: clamp(4.4rem, 0.5177993528vw + 4.2058252427rem, 5.5106796117rem) minmax(0, 1fr);
  column-gap: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2776699029rem);
  row-gap: 0.2em;
  align-items: start;
}
.bro-news-detail__author-photo-wrap {
  grid-row: 1/span 2;
  width: clamp(4.4rem, 0.5177993528vw + 4.2058252427rem, 5.5106796117rem);
  height: clamp(4.4rem, 0.5177993528vw + 4.2058252427rem, 5.5106796117rem);
  border-radius: 0;
  overflow: hidden;
  background: var(--clr-gray-200);
}
.bro-news-detail__author-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bro-news-detail__author-name {
  grid-column: 2;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  font-weight: 700;
  color: var(--clr-gray-900);
  line-height: 1.3;
}
.bro-news-detail__author-role {
  grid-column: 2;
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2388349515rem);
  color: var(--clr-gray-500);
  line-height: 1.45;
}
.bro-news-detail__main {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}
.bro-news-detail__related-strip {
  margin: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4.4660194175rem) 0 0;
  padding: 0;
}
.bro-news-detail__related-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  margin-bottom: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
}
.bro-news-detail__related-arrows {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8776699029rem);
  flex-shrink: 0;
}
.bro-news-detail__related-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.4rem, 0.2588996764vw + 3.3029126214rem, 3.9553398058rem);
  height: clamp(3.4rem, 0.2588996764vw + 3.3029126214rem, 3.9553398058rem);
  padding: 0;
  border: 1px solid var(--clr-gray-300);
  border-radius: 0;
  background: #fff;
  color: var(--clr-gray-700);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.bro-news-detail__related-nav:hover, .bro-news-detail__related-nav:focus-visible {
  border-color: var(--clr-primary-main);
  color: var(--clr-primary-main);
}
.bro-news-detail__related-nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.bro-news-detail__related-swiper-wrap {
  position: relative;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.bro-news-detail__related-swiper {
  overflow: hidden;
  margin: 0;
  padding: 0 clamp(0.2rem, 0.1294498382vw + 0.1514563107rem, 0.4776699029rem) clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem);
}
.bro-news-detail__related-swiper .swiper-slide {
  display: flex;
  height: auto;
  box-sizing: border-box;
}
.bro-news-detail__section-title {
  margin: 0 0 clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2776699029rem);
  font-size: clamp(1.5rem, 0.1941747573vw + 1.427184466rem, 1.9165048544rem);
  font-weight: 800;
  color: var(--clr-gray-900);
}
.bro-news-detail__bullets {
  margin: 0 0 clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem);
  padding-left: 1.15rem;
  font-size: clamp(1.3rem, 0.1294498382vw + 1.2514563107rem, 1.5776699029rem);
  line-height: 1.7;
  color: var(--clr-gray-700);
}
.bro-news-detail__bullets li {
  margin-bottom: 0.5em;
}
.bro-news-detail__para {
  margin: 0 0 clamp(1.4rem, 0.2588996764vw + 1.3029126214rem, 1.9553398058rem);
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
  line-height: 1.85;
  color: var(--clr-gray-800);
}
.bro-news-detail__body b,
.bro-news-detail__body strong {
  font-weight: 700;
}
.bro-news-detail__body i,
.bro-news-detail__body em {
  font-style: italic;
}
.bro-news-detail__source-action {
  margin: clamp(2.4rem, 0.5177993528vw + 2.2058252427rem, 3.5106796117rem) 0 0;
}
.bro-news-detail__source-btn {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  text-decoration: none;
}
.bro-news-detail__back-nav {
  margin-top: clamp(2.8rem, 0.7766990291vw + 2.5087378641rem, 4.4660194175rem);
  padding-top: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  border-top: 1px solid var(--clr-gray-200);
}
.bro-news-detail__back {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.8rem, 0.1294498382vw + 0.7514563107rem, 1.0776699029rem);
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  font-weight: 600;
  color: var(--clr-primary-800);
  text-decoration: none;
}
.bro-news-detail__back:hover, .bro-news-detail__back:focus-visible {
  color: var(--clr-primary-main);
}
.bro-news-detail__related-card {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2776699029rem);
  padding: clamp(1.6rem, 0.2588996764vw + 1.5029126214rem, 2.1553398058rem);
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--clr-primary-main) 22%, var(--clr-gray-200));
  background: color-mix(in srgb, var(--clr-primary-main) 4%, #fff);
  text-decoration: none;
  box-shadow: none;
  transition: border-color 0.2s ease;
}
.bro-news-detail__related-card:hover, .bro-news-detail__related-card:focus-visible {
  border-color: color-mix(in srgb, var(--clr-primary-main) 45%, var(--clr-gray-300));
}
.bro-news-detail__related-card--slide {
  min-height: clamp(16rem, 2.5889967638vw + 15.0291262136rem, 21.5533980583rem);
  justify-content: space-between;
}
.bro-news-detail__related-label {
  font-size: clamp(1.5rem, 0.1294498382vw + 1.4514563107rem, 1.7776699029rem);
  font-weight: 800;
  color: var(--clr-gray-900);
}
.bro-news-detail__related-cta {
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3388349515rem);
  font-weight: 600;
  color: var(--clr-primary-800);
}
.bro-news-detail__related-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 100%;
  gap: clamp(1rem, 0.1294498382vw + 0.9514563107rem, 1.2776699029rem);
  padding: clamp(1.2rem, 0.1294498382vw + 1.1514563107rem, 1.4776699029rem);
  border: 1px solid var(--clr-gray-200);
  background: #fff;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bro-news-detail__related-item:hover, .bro-news-detail__related-item:focus-visible {
  border-color: color-mix(in srgb, var(--clr-primary-main) 35%, var(--clr-gray-200));
  box-shadow: 0 4px 14px rgba(13, 53, 114, 0.08);
}
.bro-news-detail__related-thumb-wrap {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6776699029rem);
  overflow: hidden;
  background: var(--clr-gray-100);
}
.bro-news-detail__related-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bro-news-detail__related-item-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8776699029rem);
  min-width: 0;
}
.bro-news-detail__related-cat {
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1388349515rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-gray-500);
  line-height: 1.2;
}
.bro-news-detail__related-name {
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--clr-gray-900);
  word-break: keep-all;
}
.bro-news-detail__related-mini-cta {
  margin-top: auto;
  padding-top: clamp(0.4rem, 0.1294498382vw + 0.3514563107rem, 0.6776699029rem);
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2388349515rem);
  font-weight: 600;
  color: var(--clr-primary-800);
}

/* Portfolio — 히어로 + 다크 그리드 카드(대표 이미지·로고·기업명) */
.bro-portfolio-main {
  padding: 0;
  margin: 0;
  background: #030712;
  color: #fff;
}

.bro-portfolio__hero.bro-services-lib__hero {
  margin-bottom: 0;
}

.bro-portfolio {
  font-family: var(--family-kr), var(--family-base), sans-serif;
  background: #030712;
  color: #f8fafc;
  overflow-x: clip;
}
.bro-portfolio__inner {
  padding-bottom: clamp(5.6rem, 2.5889967638vw + 4.6291262136rem, 11.1533980583rem);
}
.bro-portfolio__page-head {
  text-align: center;
}
.bro-portfolio__kicker {
  margin: 0 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  font-size: clamp(1.1rem, 0.1294498382vw + 1.0514563107rem, 1.3776699029rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.55);
}
.bro-portfolio__title {
  margin: 0;
  font-size: clamp(2.8rem, 1.0355987055vw + 2.4116504854rem, 5.0213592233rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
  color: #fff;
}
.bro-portfolio__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
}
@media (min-width: 768px) {
  .bro-portfolio__toolbar {
    flex-wrap: nowrap;
  }
}
.bro-portfolio__filters {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  flex: 0 1 auto;
  min-width: 0;
}
.bro-portfolio__select-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: clamp(16rem, 2.5889967638vw + 15.0291262136rem, 21.5533980583rem);
  min-width: 0;
}
.bro-portfolio__select-label {
  font-size: clamp(1rem, 0.0647249191vw + 0.9757281553rem, 1.1388349515rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.45);
}
.bro-portfolio__select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
}
.bro-portfolio__search-wrap {
  position: relative;
  flex: 1 1 clamp(20rem, 10.355987055vw + 16.1165048544rem, 42.213592233rem);
  min-width: 0;
}
.bro-portfolio__search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(248, 250, 252, 0.45);
  pointer-events: none;
}
.bro-portfolio__search {
  width: 100%;
  padding: 0.55rem 0.85rem 0.55rem 2.35rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
}
.bro-portfolio__search::placeholder {
  color: rgba(248, 250, 252, 0.35);
}
.bro-portfolio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 544px) {
  .bro-portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .bro-portfolio__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.bro-portfolio__cell {
  margin: 0;
  padding: 0;
}
.bro-portfolio__card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 0.35rem;
  overflow: hidden;
  outline: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bro-portfolio__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.bro-portfolio__card:focus-visible {
  outline: 2px solid rgba(130, 175, 255, 0.7);
  outline-offset: 3px;
}
.bro-portfolio__card.is-hidden {
  display: none;
}
.bro-portfolio__media {
  position: relative;
  aspect-ratio: 16/9;
  background: #0f172a;
}
.bro-portfolio__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bro-portfolio__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 7, 18, 0.92) 0%, rgba(3, 7, 18, 0.2) 45%, transparent 70%);
  pointer-events: none;
}
.bro-portfolio__logo-wrap {
  position: absolute;
  top: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  left: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  width: clamp(5.2rem, 1.2944983819vw + 4.7145631068rem, 7.9766990291rem);
  height: clamp(5.2rem, 1.2944983819vw + 4.7145631068rem, 7.9766990291rem);
  padding: clamp(0.6rem, 0.1294498382vw + 0.5514563107rem, 0.8776699029rem);
  background: rgba(3, 7, 18, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bro-portfolio__logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.bro-portfolio__caption {
  position: absolute;
  left: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  right: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
  bottom: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem);
}
.bro-portfolio__company {
  margin: 0;
  font-size: clamp(1.5rem, 0.1941747573vw + 1.427184466rem, 1.9165048544rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.bro-portfolio__empty {
  text-align: center;
  color: rgba(248, 250, 252, 0.55);
  margin: 2rem 0 0;
}

/* 상세 — 라이트 톤 */
.bro-portfolio-detail-main {
  padding: 0;
  margin: 0;
  background: var(--clr-gray-50);
  color: var(--clr-gray-900);
}

.bro-portfolio-detail {
  font-family: var(--family-kr), var(--family-base), sans-serif;
}
.bro-portfolio-detail__inner {
  padding-bottom: clamp(4.8rem, 2.5889967638vw + 3.8291262136rem, 10.3533980583rem);
}
.bro-portfolio-detail__back {
  padding-top: clamp(2.4rem, 1.0355987055vw + 2.0116504854rem, 4.6213592233rem);
}
.bro-portfolio-detail__back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: clamp(1.3rem, 0.0647249191vw + 1.2757281553rem, 1.4388349515rem);
  font-weight: 400;
  color: var(--clr-primary-main);
  text-decoration: none;
}
.bro-portfolio-detail__back-link::before {
  content: "←";
  font-size: 1rem;
}
.bro-portfolio-detail__back-link:hover {
  text-decoration: underline;
}
.bro-portfolio-detail__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.8rem, 1.2944983819vw + 2.3145631068rem, 5.5766990291rem);
}
@media (min-width: 1024px) {
  .bro-portfolio-detail__layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
  }
}
.bro-portfolio-detail__left {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
}
.bro-portfolio-detail__logo-box {
  padding: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem);
  background: #fff;
  border: 1px solid var(--clr-gray-200);
  border-radius: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(12rem, 2.5889967638vw + 11.0291262136rem, 17.5533980583rem);
}
.bro-portfolio-detail__logo {
  max-width: 100%;
  max-height: clamp(10rem, 2.5889967638vw + 9.0291262136rem, 15.5533980583rem);
  object-fit: contain;
}
.bro-portfolio-detail__tasks-label {
  margin: 0 0 clamp(0.8rem, 0.2588996764vw + 0.7029126214rem, 1.3553398058rem);
  font-size: clamp(1.2rem, 0.0647249191vw + 1.1757281553rem, 1.3388349515rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-gray-500);
}
.bro-portfolio-detail__tasks-body {
  font-size: clamp(1.5rem, 0.1294498382vw + 1.4514563107rem, 1.7776699029rem);
  line-height: 1.65;
  color: var(--clr-gray-800);
  white-space: pre-wrap;
}
.bro-portfolio-detail__right {
  padding-top: clamp(0.4rem, 0.2588996764vw + 0.3029126214rem, 0.9553398058rem);
}
.bro-portfolio-detail__head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 0.2588996764vw + 0.9029126214rem, 1.5553398058rem);
  padding-bottom: clamp(1.6rem, 0.5177993528vw + 1.4058252427rem, 2.7106796117rem);
  border-bottom: 1px solid var(--clr-gray-200);
}
.bro-portfolio-detail__title {
  margin: 0;
  font-size: clamp(2.6rem, 0.9061488673vw + 2.2601941748rem, 4.5436893204rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.bro-portfolio-detail__badge {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  font-size: clamp(1.1rem, 0.0647249191vw + 1.0757281553rem, 1.2388349515rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-primary-main);
  border: 1px solid color-mix(in srgb, var(--clr-primary-main) 35%, var(--clr-gray-200));
  border-radius: 999px;
  background: color-mix(in srgb, var(--clr-primary-main) 6%, #fff);
}
.bro-portfolio-detail__meta {
  margin: clamp(2rem, 0.5177993528vw + 1.8058252427rem, 3.1106796117rem) 0 0;
  padding: 0;
}
.bro-portfolio-detail__meta-row {
  display: grid;
  grid-template-columns: clamp(10rem, 2.5889967638vw + 9.0291262136rem, 15.5533980583rem) 1fr;
  gap: clamp(0.8rem, 0.5177993528vw + 0.6058252427rem, 1.9106796117rem);
  padding: clamp(1.2rem, 0.2588996764vw + 1.1029126214rem, 1.7553398058rem) 0;
  border-bottom: 1px solid var(--clr-gray-200);
  font-size: clamp(1.4rem, 0.1294498382vw + 1.3514563107rem, 1.6776699029rem);
}
.bro-portfolio-detail__meta-row dt {
  margin: 0;
  font-weight: 400;
  color: var(--clr-gray-500);
}
.bro-portfolio-detail__meta-row dd {
  margin: 0;
  color: var(--clr-gray-900);
}
.bro-portfolio-detail__link {
  color: var(--clr-primary-main);
  font-weight: 400;
  text-decoration: none;
}
.bro-portfolio-detail__link:hover {
  text-decoration: underline;
}

:root {
  --admin-white: #ffffff;
  --admin-black: #0a0a0a;
  --admin-grey-50: #fafafa;
  --admin-grey-100: #f5f5f5;
  --admin-grey-200: #eeeeee;
  --admin-grey-300: #e0e0e0;
  --admin-grey-400: #bdbdbd;
  --admin-grey-500: #9e9e9e;
  --admin-grey-600: #757575;
  --admin-grey-700: #616161;
  --admin-grey-800: #424242;
  --admin-grey-900: #212121;
  --admin-error: #ba1a1a;
  --admin-error-rgb: 186, 26, 26;
  --admin-error-bg: #fef2f2;
  --admin-error-text: #b91c1c;
  --admin-error-hover: rgb(159.1528301887, 22.2471698113, 22.2471698113);
  --admin-error-active: rgb(141.2547169811, 19.7452830189, 19.7452830189);
  --admin-success: #2e7d32;
  --admin-success-rgb: 46, 125, 50;
  --admin-success-bg: #e8f5e9;
  --admin-success-text: #1b5e20;
  --admin-success-hover: rgb(37.7684210526, 102.6315789474, 41.0526315789);
  --admin-success-active: rgb(32.2807017544, 87.7192982456, 35.0877192982);
  --admin-warn: #ed6c02;
  --admin-warn-rgb: 237, 108, 2;
  --admin-warn-bg: #fff3e0;
  --admin-warn-text: #e65100;
  --admin-warn-hover: rgb(206.6560669456, 94.1723849372, 1.7439330544);
  --admin-warn-active: rgb(186.4267782427, 84.9539748954, 1.5732217573);
  --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: #616161;
  --admin-info-rgb: 97, 97, 97;
  --admin-info-bg: #f5f5f5;
  --admin-info-text: #424242;
  --admin-primary: #171717;
  --admin-primary-rgb: 23, 23, 23;
  --admin-primary-hover: #262626;
  --admin-primary-light: #f5f5f5;
  --admin-on-primary: #ffffff;
  --admin-sidebar-width: 220px;
  --admin-header-height: 64px;
  --admin-body-bg: #f5f5f5;
  --admin-main-bg: #ffffff;
  --admin-card-bg: #ffffff;
  --admin-header-bg: #0a0a0a;
  --admin-header-bg-hover: #171717;
  --admin-sidebar-bg: #ffffff;
  --admin-sidebar-border: #e5e7eb;
  --admin-sidebar-text: #4b5563;
  --admin-sidebar-text-active: #111827;
  --admin-sidebar-hover-bg: rgba(0, 0, 0, 0.04);
  --admin-sidebar-active-bg: #f5f5f5;
  --admin-sidebar-active-bar: none;
  --admin-sidebar-active-accent: #171717;
  --admin-sidebar-focus-ring: rgba(0, 0, 0, 0.25);
  --admin-sidebar-summary-open-bg: transparent;
  --admin-sidebar-summary-open-border: transparent;
  --admin-sidebar-sublink-active-bg: #f5f5f5;
  --admin-sidebar-sublink-active-bar: none;
  --admin-sidebar-top-bg: #f9fafb;
  --admin-sidebar-top-border: #e5e7eb;
  --admin-sidebar-top-text: #374151;
  --admin-sidebar-avatar-bg: #171717;
  --admin-border: #e5e5e5;
  --admin-border-light: #eeeeee;
  --admin-outline: rgba(0, 0, 0, 0.12);
  --admin-outline-variant: rgba(0, 0, 0, 0.08);
  --admin-fs-xs: 1rem;
  --admin-fs-sm: 1.15rem;
  --admin-fs-base: 1.2rem;
  --admin-fs-body: 1.35rem;
  --admin-fs-body-lg: 1.4rem;
  --admin-fs-body-xl: 1.45rem;
  --admin-fs-menu: 1.75rem;
  --admin-fs-title: 2rem;
  --admin-fs-subtitle: 2.2rem;
  --admin-fs-display: 2.6rem;
  --admin-text: #0a0a0a;
  --admin-text-secondary: #525252;
  --admin-text-muted: #737373;
  --admin-state-hover: rgba(0, 0, 0, 0.06);
  --admin-state-focus: rgba(0, 0, 0, 0.1);
  --admin-state-pressed: rgba(0, 0, 0, 0.1);
  --admin-state-drag: rgba(0, 0, 0, 0.14);
  --admin-focus-ring: 2px solid var(--admin-primary);
  --admin-focus-ring-offset: 2px;
  --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: 4px;
  --admin-radius-sm: 8px;
  --admin-radius: 12px;
  --admin-radius-lg: 16px;
  --admin-radius-full: 9999px;
  --admin-size-input-height: 2.75rem;
  --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.35rem;
  --admin-space-2xs: 0.5rem;
  --admin-space-xs: 0.65rem;
  --admin-space-sm: 0.9rem;
  --admin-space: 1.2rem;
  --admin-space-lg: 1.5rem;
  --admin-space-xl: 1.8rem;
  --admin-space-2xl: 2.4rem;
  --admin-space-3xl: 3rem;
  --admin-space-4xl: 3.6rem;
  --admin-elevation-0: none;
  --admin-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --admin-elevation-2: 0 2px 8px rgba(0, 0, 0, 0.06);
  --admin-elevation-3: 0 4px 16px rgba(0, 0, 0, 0.08);
  --admin-shadow: var(--admin-elevation-1);
  --admin-shadow-card: var(--admin-elevation-2);
  --admin-modal-backdrop-bg: rgba(0, 0, 0, 0.45);
  --admin-modal-backdrop-padding: var(--admin-space-lg);
  --admin-modal-backdrop-z: 10000;
  --admin-modal-box-bg: var(--admin-white);
  --admin-modal-box-radius: var(--admin-radius);
  --admin-modal-box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18), 0 0 1px rgba(0, 0, 0, 0.08);
  --admin-modal-min-width: 26rem;
  --admin-modal-max-width: min(90vw, 36rem);
  --admin-modal-max-height: 85vh;
  --admin-modal-header-padding: var(--admin-space) var(--admin-space-lg);
  --admin-modal-header-border: 1px solid var(--admin-border);
  --admin-modal-title-fs: var(--admin-fs-body-lg);
  --admin-modal-title-fw: 600;
  --admin-modal-title-color: var(--admin-text);
  --admin-modal-close-size: 2rem;
  --admin-modal-close-radius: var(--admin-radius-sm);
  --admin-modal-close-color: var(--admin-text-muted);
  --admin-modal-close-hover-bg: var(--admin-grey-100);
  --admin-modal-close-hover-color: var(--admin-text);
  --admin-modal-close-focus-ring: 2px solid var(--admin-primary);
  --admin-modal-body-padding: var(--admin-space-xl) var(--admin-space-lg);
  --admin-modal-body-color: var(--admin-text-secondary);
  --admin-modal-body-fs: var(--admin-fs-body);
  --admin-modal-body-lh: 1.6;
  --admin-modal-footer-padding: var(--admin-space) var(--admin-space-lg);
  --admin-modal-footer-border: 1px solid var(--admin-border);
  --admin-modal-btn-padding: 0.5rem 1.25rem;
  --admin-modal-btn-radius: var(--admin-radius-sm);
  --admin-modal-btn-fs: var(--admin-fs-sm);
  --admin-modal-btn-border: 1px solid var(--admin-border);
  --admin-modal-btn-bg: var(--admin-white);
  --admin-modal-btn-color: var(--admin-text-secondary);
  --admin-modal-btn-hover-bg: var(--admin-grey-50);
  --admin-modal-btn-hover-border: var(--admin-grey-400);
  --admin-modal-btn-primary-bg: var(--admin-primary);
  --admin-modal-btn-primary-color: var(--admin-on-primary);
  --admin-modal-btn-primary-hover-bg: var(--admin-primary-hover);
  --admin-modal-duration: var(--admin-duration);
}

.admin {
  margin: 0;
  font-family: "Roboto", 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;
}

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

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

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

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

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

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

.admin-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 85;
  opacity: 0;
  transition: opacity var(--admin-duration-long) var(--admin-ease);
}

@media (max-width: 992px) {
  .admin__content-wrap {
    margin-left: 0;
  }
  .admin__main {
    padding: var(--admin-space-lg) var(--admin-space);
  }
  .admin__content {
    padding: 0;
  }
  .admin-sidebar-overlay {
    display: block;
    pointer-events: none;
  }
  .admin--sidebar-open .admin-sidebar-overlay {
    pointer-events: auto;
    opacity: 1;
  }
  .admin.admin--sidebar-open {
    overflow: hidden;
  }
  .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.admin-auth__password-wrap {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
  min-height: var(--admin-size-input-height);
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-outline-variant);
  background: var(--admin-white);
  transition: border-color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
  overflow: hidden;
}
.admin-auth__password-wrap:hover {
  border-color: var(--admin-border);
  background: var(--admin-grey-50);
}
.admin-auth__password-wrap:focus-within {
  border-color: var(--admin-primary);
  border-width: 2px;
  box-shadow: 0 0 0 1px var(--admin-primary);
}
.admin-auth__password-wrap .admin-auth__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--admin-size-input-height);
  border: none;
  border-radius: 0;
  padding-right: var(--admin-size-input-height);
  padding-left: var(--admin-space);
  background: transparent;
  box-shadow: none;
}
.admin-auth__password-wrap .admin-auth__input:focus {
  box-shadow: none;
}

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

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

.admin-header {
  flex-shrink: 0;
  height: var(--admin-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--admin-space) 0 var(--admin-space);
  gap: var(--admin-space);
  background: var(--admin-header-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 80;
}

.admin-header__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--admin-radius-sm);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  font: inherit;
  transition: background var(--admin-duration) var(--admin-ease);
  flex-shrink: 0;
}
.admin-header__menu-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}
.admin-header__menu-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}
.admin-header__menu-btn .admin-header__menu-icon {
  font-size: var(--admin-fs-body-xl);
}
.admin-header__menu-btn .admin-header__menu-icon--close {
  display: none;
}

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

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

.admin-header__breadcrumb {
  flex: 1;
  min-width: 0;
  margin: 0 var(--admin-space-sm) 0 0;
}

.admin-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--admin-space-2xs);
  font-size: var(--admin-fs-body);
}

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

.admin-breadcrumb__link {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  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.8);
  outline-offset: 2px;
}

.admin-breadcrumb__sep {
  color: rgba(255, 255, 255, 0.5);
  user-select: none;
  pointer-events: none;
}

.admin-breadcrumb__current {
  color: #fff;
  font-weight: 600;
}

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

.admin-header__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--admin-space-2xs);
  min-height: 40px;
  padding: 0 var(--admin-space-sm);
  border-radius: var(--admin-radius-full);
  color: rgba(255, 255, 255, 0.95);
  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.2);
  color: #fff;
}
.admin-header__action:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}
.admin-header__action i {
  font-size: var(--admin-fs-body);
  flex-shrink: 0;
}

.admin-header__action-label {
  white-space: nowrap;
}

.admin-header__dropdown {
  position: relative;
}
.admin-header__dropdown[open] .admin-header__avatar {
  background: rgba(255, 255, 255, 0.3);
}

.admin-header__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  list-style: none;
  padding: 0;
  transition: background 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.28);
}
.admin-header__avatar:not(:has(.admin-header__avatar-img)) {
  background: var(--admin-grey-800);
}
.admin-header__avatar:not(:has(.admin-header__avatar-img)):hover {
  background: var(--admin-grey-700);
}
.admin-header__avatar--lg {
  width: 56px;
  height: 56px;
  font-size: var(--admin-fs-body-xl);
  cursor: default;
  background: var(--admin-grey-800);
  flex-shrink: 0;
}
.admin-header__avatar--lg:not(:has(.admin-header__avatar-img)) {
  background: var(--admin-grey-800);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.admin-header__avatar-letter {
  font-size: var(--admin-fs-base);
  font-weight: 600;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.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-menu);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

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

.admin-header__dropdown-menu {
  position: absolute;
  top: calc(100% + var(--admin-space-sm));
  right: 0;
  min-width: 280px;
  background: var(--admin-card-bg);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-elevation-3), 0 0 1px var(--admin-border-light);
  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-2xl) var(--admin-space-xl) var(--admin-space-xl);
  padding-top: calc(var(--admin-space-3xl) + var(--admin-space-lg));
}

.admin-header__dropdown-head-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--admin-size-dropdown-head-bg);
  background: var(--admin-primary);
  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: var(--admin-elevation-2);
}

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

.admin-header__dropdown-role {
  position: relative;
  z-index: 1;
  margin-top: var(--admin-space-2xs);
  font-size: var(--admin-fs-sm);
  font-weight: 500;
  color: var(--admin-text-muted);
}

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

.admin-header__dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--admin-space);
  width: 100%;
  padding: var(--admin-space) var(--admin-space-xl);
  font-size: var(--admin-fs-body);
  color: var(--admin-text);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background var(--admin-duration) var(--admin-ease);
  box-sizing: border-box;
}
.admin-header__dropdown-item:hover {
  background: var(--admin-grey-50);
}
.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.2em;
  text-align: center;
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-body);
}
.admin-header__dropdown-item > span {
  flex: 1;
  min-width: 0;
}
.admin-header__dropdown-item .admin-header__dropdown-item-ext {
  flex-shrink: 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-muted);
}
.admin-header__dropdown-item--logout {
  color: var(--admin-error);
  font-weight: 500;
  margin-top: var(--admin-space-2xs);
  padding-top: var(--admin-space);
  border-top: 1px solid var(--admin-border-light);
}
.admin-header__dropdown-item--logout:hover {
  background: var(--admin-error-bg);
}
.admin-header__dropdown-item--logout i {
  color: var(--admin-error);
}

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

.admin-header__notifications {
  position: relative;
}

.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-sm));
  right: 0;
  min-width: 320px;
  max-width: 400px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--admin-card-bg);
  border-radius: var(--admin-radius-lg);
  box-shadow: var(--admin-elevation-3), 0 0 1px var(--admin-border-light);
  border: 1px solid var(--admin-border-light);
  z-index: 200;
  overflow: hidden;
}

.admin-header__notifications-list {
  padding: var(--admin-space-sm) 0;
  max-height: 320px;
  overflow-y: auto;
}

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

.admin-header__notifications-item {
  display: block;
  padding: var(--admin-space) var(--admin-space-lg);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text);
  text-decoration: none;
  border-bottom: 1px solid var(--admin-border-light);
  transition: background var(--admin-duration) var(--admin-ease);
}
.admin-header__notifications-item:hover {
  background: var(--admin-grey-50);
}

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

.admin-header__notifications-all {
  flex-shrink: 0;
  padding: var(--admin-space) var(--admin-space-lg);
  font-size: var(--admin-fs-body);
  font-weight: 500;
  color: var(--admin-primary);
  text-align: center;
  text-decoration: none;
  border-top: 1px solid var(--admin-border-light);
  transition: background var(--admin-duration) var(--admin-ease);
}
.admin-header__notifications-all:hover {
  background: var(--admin-grey-50);
}

@media (max-width: 992px) {
  .admin-header__menu-btn {
    display: inline-flex;
  }
  .admin-header__action-label {
    display: none;
  }
  .admin-header__action {
    padding: 0;
    min-width: 40px;
    min-height: 40px;
  }
  .admin-header__action:not(.admin-header__action--link) {
    display: none;
  }
  .admin-header__actions .admin-header__action--link {
    display: inline-flex;
  }
  .admin-header__breadcrumb {
    display: none !important; /* 모바일에서는 헤더 브레드크럼 숨김 → admin-page__breadcrumb 표시 */
    margin-right: var(--admin-space-2xs);
  }
  .admin-breadcrumb {
    font-size: var(--admin-fs-base);
  }
}
.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--admin-sidebar-width);
  display: flex;
  flex-direction: column;
  background: var(--admin-sidebar-bg);
  z-index: 90;
  overflow: hidden;
  border-right: 1px solid var(--admin-sidebar-border);
}

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

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

.admin-sidebar__logo img {
  display: block;
  max-width: 100%;
  height: 28px;
  width: auto;
  object-fit: contain;
}

.admin-sidebar__collapse {
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--admin-radius-xs);
  background: var(--admin-sidebar-hover-bg);
  color: var(--admin-sidebar-text);
  cursor: pointer;
  font-size: var(--admin-fs-sm);
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-sidebar__collapse:hover {
  background: var(--admin-grey-200);
  color: var(--admin-sidebar-text-active);
}
.admin-sidebar__collapse:focus-visible {
  outline: 2px solid var(--admin-primary);
  outline-offset: 2px;
}

@media (min-width: 993px) {
  .admin-sidebar__collapse {
    display: inline-flex;
  }
}
.admin-sidebar__label {
  flex-shrink: 0;
  display: block;
  padding: var(--admin-space-sm) var(--admin-space-sm) var(--admin-space-2xs);
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--admin-sidebar-text);
  opacity: 0.7;
  text-transform: uppercase;
}

.admin-sidebar__list {
  list-style: none;
  margin: 0;
  padding: var(--admin-space-xs) 0 var(--admin-space-sm);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.admin-sidebar__item {
  margin: 0 0 var(--admin-space-3xs);
}
.admin-sidebar__item--group {
  margin: 0 0 var(--admin-space-3xs);
}

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

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

.admin-sidebar__text {
  flex: 1;
  min-width: 0;
}

.admin-sidebar__details {
  margin: 0;
}
.admin-sidebar__details[open] .admin-sidebar__summary:not(.admin-sidebar__summary--active) {
  color: var(--admin-sidebar-text);
  background: transparent;
}
.admin-sidebar__details[open] .admin-sidebar__summary:not(.admin-sidebar__summary--active) .admin-sidebar__icon {
  color: var(--admin-sidebar-text);
  opacity: 0.9;
}
.admin-sidebar__details[open] .admin-sidebar__summary.admin-sidebar__summary--active {
  color: var(--admin-on-primary);
  background: var(--admin-primary);
  border-left-color: transparent;
}
.admin-sidebar__details[open] .admin-sidebar__summary.admin-sidebar__summary--active .admin-sidebar__icon {
  color: var(--admin-on-primary);
  opacity: 1;
}
.admin-sidebar__details[open] .admin-sidebar__summary.admin-sidebar__summary--active .admin-sidebar__chevron {
  color: var(--admin-on-primary);
}
.admin-sidebar__details[open] .admin-sidebar__summary .admin-sidebar__chevron {
  transform: rotate(180deg);
}
.admin-sidebar__details[open] .admin-sidebar__sublist {
  padding: var(--admin-space-2xs) 0 var(--admin-space-sm) 0;
  padding-left: var(--admin-space);
  margin-top: 0;
  border-top: none;
  background: transparent;
}

.admin-sidebar__summary {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--admin-space-sm) var(--admin-space-sm) var(--admin-space-sm) var(--admin-space);
  min-height: 40px;
  margin: 0 var(--admin-space-xs);
  color: var(--admin-sidebar-text);
  font-size: var(--admin-fs-body);
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  list-style: none;
  border-left: 3px solid transparent;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-sidebar__summary::-webkit-details-marker, .admin-sidebar__summary::marker {
  display: none;
}
.admin-sidebar__summary:hover {
  color: var(--admin-sidebar-text-active);
  background: var(--admin-sidebar-hover-bg);
}
.admin-sidebar__summary:hover .admin-sidebar__icon {
  opacity: 1;
}
.admin-sidebar__summary:focus-visible {
  outline: 2px solid var(--admin-sidebar-focus-ring);
  outline-offset: 2px;
}
.admin-sidebar__summary.admin-sidebar__summary--active {
  font-weight: 600;
  color: var(--admin-on-primary);
  background: var(--admin-primary);
  border-left-color: transparent;
}
.admin-sidebar__summary.admin-sidebar__summary--active .admin-sidebar__icon {
  opacity: 1;
  color: var(--admin-on-primary);
}

.admin-sidebar__chevron {
  margin-left: auto;
  font-size: var(--admin-fs-xs);
  color: var(--admin-sidebar-text);
  opacity: 0.7;
  transition: transform var(--admin-duration) var(--admin-ease);
  flex-shrink: 0;
}

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

.admin-sidebar__subitem {
  margin: 0 0 var(--admin-space-3xs);
}

.admin-sidebar__sublink {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--admin-space-xs) var(--admin-space-sm) var(--admin-space-xs) var(--admin-space-lg);
  min-height: 36px;
  color: var(--admin-sidebar-text);
  text-decoration: none;
  font-size: var(--admin-fs-base);
  font-weight: 500;
  border-radius: var(--admin-radius-sm);
  margin: 0 var(--admin-space-xs);
  border-left: 3px solid transparent;
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-sidebar__sublink > span {
  flex: 1;
  min-width: 0;
}
.admin-sidebar__sublink:hover {
  color: var(--admin-sidebar-text-active);
  background: var(--admin-sidebar-hover-bg);
}
.admin-sidebar__sublink:focus-visible {
  outline: 2px solid var(--admin-sidebar-focus-ring);
  outline-offset: 2px;
}
.admin-sidebar__sublink.admin-sidebar__sublink--active {
  color: var(--admin-sidebar-text-active);
  font-weight: 600;
  background: var(--admin-sidebar-active-bg);
  border-left-color: var(--admin-sidebar-active-accent);
}

@media (max-width: 992px) {
  .admin-sidebar {
    transform: translateX(-100%);
    transition: transform var(--admin-duration-long) var(--admin-ease), box-shadow var(--admin-duration-long) var(--admin-ease);
  }
  .admin--sidebar-open .admin-sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  }
}
.admin-flash {
  padding: var(--admin-space) var(--admin-space);
  margin-bottom: var(--admin-space);
  border-radius: var(--admin-radius-sm);
  font-size: var(--admin-fs-body);
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid transparent;
  box-shadow: var(--admin-elevation-0);
}

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

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

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

.admin-flash--info {
  background: var(--admin-info-bg);
  color: var(--admin-info-text);
  border-color: rgba(var(--admin-info-rgb), 0.3);
}

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

.admin-footer {
  padding: var(--admin-space) var(--admin-space-lg);
  font-size: var(--admin-fs-xs);
  font-weight: 500;
  color: var(--admin-text-muted);
  letter-spacing: 0.02em;
}

.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--admin-space-sm) var(--admin-space-lg);
  font-size: var(--admin-fs-body);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: none;
  border-radius: var(--admin-radius-sm);
  cursor: pointer;
  font-family: inherit;
  background: var(--admin-card-bg);
  color: var(--admin-text);
  border: 1px solid var(--admin-outline-variant);
  box-shadow: var(--admin-elevation-0);
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-btn:hover {
  background: var(--admin-grey-100);
  border-color: var(--admin-border);
}
.admin-btn:active {
  background: var(--admin-grey-200);
}
.admin-btn:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: var(--admin-focus-ring-offset);
}
.admin-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}
.admin-btn--primary {
  background: var(--admin-primary);
  border-color: transparent;
  color: var(--admin-on-primary);
  box-shadow: var(--admin-elevation-0);
}
.admin-btn--primary:hover {
  background: var(--admin-primary-hover);
  box-shadow: var(--admin-elevation-1);
}
.admin-btn--primary:active {
  background: var(--admin-grey-900);
}
.admin-btn--primary:focus-visible {
  outline-color: var(--admin-primary);
}
.admin-btn--secondary {
  background: var(--admin-primary-light);
  border-color: transparent;
  color: var(--admin-primary);
}
.admin-btn--secondary:hover {
  background: rgba(var(--admin-primary-rgb), 0.08);
}
.admin-btn--secondary:active {
  background: rgba(var(--admin-primary-rgb), 0.12);
}
.admin-btn--danger {
  background: var(--admin-error);
  border-color: transparent;
  color: #fff;
}
.admin-btn--danger:hover {
  background: var(--admin-error-hover);
}
.admin-btn--danger:active {
  background: var(--admin-error-active);
}
.admin-btn--danger:focus-visible {
  outline-color: var(--admin-error);
}
.admin-btn--success {
  background: var(--admin-success);
  border-color: transparent;
  color: #fff;
}
.admin-btn--success:hover {
  background: var(--admin-success-hover);
}
.admin-btn--success:active {
  background: var(--admin-success-active);
}
.admin-btn--warn {
  background: var(--admin-warn);
  border-color: transparent;
  color: #fff;
}
.admin-btn--warn:hover {
  background: var(--admin-warn-hover);
}
.admin-btn--warn:active {
  background: var(--admin-warn-active);
}
.admin-btn--premium {
  background: var(--admin-premium);
  border-color: transparent;
  color: var(--admin-grey-900);
}
.admin-btn--premium:hover {
  background: var(--admin-premium-hover);
}
.admin-btn--premium:active {
  background: var(--admin-premium-active);
}
.admin-btn--sm {
  padding: var(--admin-space-2xs) var(--admin-space);
  font-size: var(--admin-fs-sm);
}

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: var(--admin-space-2xs);
  font-size: var(--admin-fs-body);
  font-weight: 500;
  color: var(--admin-text-secondary);
  letter-spacing: 0.01em;
}

.admin-input, .admin-textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: var(--admin-space-sm) var(--admin-space);
  font-size: var(--admin-fs-body-lg);
  line-height: 1.5;
  color: var(--admin-text);
  background: var(--admin-white);
  border: 1px solid var(--admin-outline-variant);
  border-radius: var(--admin-radius-sm);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-input::placeholder, .admin-textarea::placeholder {
  color: var(--admin-text-muted);
}
.admin-input:hover:not(:disabled):not(:focus), .admin-textarea:hover:not(:disabled):not(:focus) {
  border-color: var(--admin-border);
  background: var(--admin-grey-50);
}
.admin-input:focus, .admin-textarea:focus {
  outline: none;
  border-color: var(--admin-primary);
  border-width: 2px;
  padding: calc(var(--admin-space-sm) - 1px) calc(var(--admin-space) - 1px);
  box-shadow: 0 0 0 1px var(--admin-primary);
}
.admin-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 {
  box-shadow: 0 0 0 1px var(--admin-error);
}
.admin-input:disabled, .admin-textarea:disabled {
  background: var(--admin-grey-100);
  color: var(--admin-text-muted);
  cursor: not-allowed;
  border-color: var(--admin-border-light);
}

.admin-textarea {
  min-height: 100px;
  resize: vertical;
}

.admin-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-sm);
  cursor: pointer;
  user-select: none;
  margin-bottom: var(--admin-space-2xs);
}
.admin-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.admin-switch__track {
  position: relative;
  flex-shrink: 0;
  background: var(--admin-outline-variant);
  border-radius: var(--admin-radius-full);
  transition: background var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
  width: 36px;
  height: 20px;
}
.admin-switch__thumb {
  position: absolute;
  background: var(--admin-white);
  border-radius: 50%;
  box-shadow: var(--admin-elevation-1);
  transition: transform var(--admin-duration) var(--admin-ease);
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
}
input:checked + .admin-switch__track {
  background: var(--admin-primary);
}
input:checked + .admin-switch__track .admin-switch__thumb {
  transform: translateX(18px);
}
input:focus-visible + .admin-switch__track {
  box-shadow: 0 0 0 2px var(--admin-white), 0 0 0 4px var(--admin-primary);
}
.admin-switch:hover .admin-switch__track {
  background: var(--admin-grey-300);
}
input:checked:hover + .admin-switch__track {
  background: var(--admin-primary-hover);
}
.admin-switch__label {
  font-size: var(--admin-fs-body);
  font-weight: 500;
  color: var(--admin-text);
}
.admin-switch--disabled {
  cursor: not-allowed;
  opacity: 0.38;
}
.admin-switch--disabled .admin-switch__track {
  background: var(--admin-grey-200);
}
.admin-switch--disabled input:checked + .admin-switch__track {
  background: var(--admin-grey-400);
}
.admin-switch--success input:checked + .admin-switch__track {
  background: var(--admin-success);
}
.admin-switch--xs .admin-switch__track {
  width: 28px;
  height: 16px;
}
.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(14px);
}
.admin-switch--sm .admin-switch__track {
  width: 36px;
  height: 20px;
}
.admin-switch--sm .admin-switch__thumb {
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
}
.admin-switch--sm input:checked + .admin-switch__track .admin-switch__thumb {
  transform: translateX(18px);
}
.admin-switch--md .admin-switch__track {
  width: 44px;
  height: 26px;
}
.admin-switch--md .admin-switch__thumb {
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
}
.admin-switch--md input:checked + .admin-switch__track .admin-switch__thumb {
  transform: translateX(22px);
}
.admin-switch--lg .admin-switch__track {
  width: 52px;
  height: 32px;
}
.admin-switch--lg .admin-switch__thumb {
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
}
.admin-switch--lg input:checked + .admin-switch__track .admin-switch__thumb {
  transform: translateX(24px);
}
.admin-switch--xl .admin-switch__track {
  width: 60px;
  height: 36px;
}
.admin-switch--xl .admin-switch__thumb {
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
}
.admin-switch--xl input:checked + .admin-switch__track .admin-switch__thumb {
  transform: translateX(28px);
}

.admin-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-sm);
  font-size: var(--admin-fs-body);
  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);
  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);
  width: 16px;
  height: 16px;
  border: 2px solid var(--admin-grey-400);
}
.admin-checkbox-wrap .admin-checkbox__box::after {
  content: "";
  border: solid var(--admin-white);
  transform: rotate(45deg) scale(0);
  margin-bottom: 1px;
  transition: transform var(--admin-duration-short) var(--admin-ease);
  width: 5px;
  height: 8px;
  border-width: 0 2px 2px 0;
}
.admin-checkbox-wrap input:checked + .admin-checkbox__box {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
}
.admin-checkbox-wrap input:checked + .admin-checkbox__box::after {
  transform: rotate(45deg) scale(1);
}
.admin-checkbox-wrap:hover .admin-checkbox__box {
  border-color: var(--admin-grey-600);
}
.admin-checkbox-wrap input:focus-visible + .admin-checkbox__box {
  box-shadow: 0 0 0 2px var(--admin-white), 0 0 0 4px var(--admin-primary);
}
.admin-checkbox-wrap--disabled {
  cursor: not-allowed;
  opacity: 0.38;
}
.admin-checkbox-wrap--disabled .admin-checkbox__box {
  background: var(--admin-grey-100);
  border-color: var(--admin-grey-300);
}
.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: 16px;
  height: 16px;
  border-width: 2px;
}
.admin-checkbox-wrap--sm .admin-checkbox__box::after {
  width: 5px;
  height: 8px;
  border-width: 0 2px 2px 0;
}
.admin-checkbox-wrap--md .admin-checkbox__box {
  width: 20px;
  height: 20px;
  border-width: 2px;
}
.admin-checkbox-wrap--md .admin-checkbox__box::after {
  width: 6px;
  height: 10px;
  border-width: 0 2.5px 2.5px 0;
}
.admin-checkbox-wrap--lg .admin-checkbox__box {
  width: 22px;
  height: 22px;
  border-width: 2px;
}
.admin-checkbox-wrap--lg .admin-checkbox__box::after {
  width: 7px;
  height: 11px;
  border-width: 0 2.5px 2.5px 0;
}
.admin-checkbox-wrap--xl .admin-checkbox__box {
  width: 24px;
  height: 24px;
  border-width: 2px;
}
.admin-checkbox-wrap--xl .admin-checkbox__box::after {
  width: 8px;
  height: 12px;
  border-width: 0 3px 3px 0;
}

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

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

.admin-radio-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space);
  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: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid var(--admin-grey-400);
  border-radius: 50%;
  background: var(--admin-white);
  transition: border-color var(--admin-duration-short) var(--admin-ease), box-shadow var(--admin-duration-short) var(--admin-ease);
}
.admin-radio-wrap .admin-radio__dot::after {
  content: "";
  width: 10px;
  height: 10px;
  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);
  border-width: 2px;
}
.admin-radio-wrap input:checked + .admin-radio__dot::after {
  transform: scale(1);
}
.admin-radio-wrap:hover .admin-radio__dot {
  border-color: var(--admin-grey-600);
}
.admin-radio-wrap input:focus-visible + .admin-radio__dot {
  box-shadow: 0 0 0 2px var(--admin-white), 0 0 0 4px var(--admin-primary);
}
.admin-radio-wrap .admin-radio__label {
  font-weight: 500;
}
.admin-radio-wrap--disabled {
  cursor: not-allowed;
  opacity: 0.38;
}
.admin-radio-wrap--disabled .admin-radio__dot {
  background: var(--admin-grey-100);
  border-color: var(--admin-grey-300);
}
.admin-radio-wrap--disabled input:checked + .admin-radio__dot::after {
  background: var(--admin-grey-500);
}

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

.admin-select {
  display: block;
  width: 100%;
  padding: var(--admin-space-sm) var(--admin-size-select-arrow) var(--admin-space-sm) var(--admin-space);
  font-size: var(--admin-fs-body-lg);
  line-height: 1.5;
  color: var(--admin-text);
  background: var(--admin-white);
  border: 1px solid var(--admin-outline-variant);
  border-radius: var(--admin-radius-sm);
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2349454f' 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) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease), background-color var(--admin-duration) var(--admin-ease);
}
.admin-select:hover:not(:disabled):not(:focus) {
  border-color: var(--admin-border);
  background-color: var(--admin-grey-50);
}
.admin-select:focus {
  outline: none;
  border-color: var(--admin-primary);
  border-width: 2px;
  padding: calc(var(--admin-space-sm) - 1px) calc(var(--admin-size-select-arrow) - 1px) calc(var(--admin-space-sm) - 1px) calc(var(--admin-space) - 1px);
  box-shadow: 0 0 0 1px var(--admin-primary);
}
.admin-select.admin-select--error {
  border-color: var(--admin-error);
}
.admin-select.admin-select--error:focus {
  box-shadow: 0 0 0 1px var(--admin-error);
}
.admin-select:disabled {
  background: var(--admin-grey-100);
  color: var(--admin-text-muted);
  cursor: not-allowed;
}

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

.admin-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--admin-space-2xs) var(--admin-space-sm);
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  line-height: 1.3;
  border-radius: var(--admin-radius-xs);
  border: 1px solid transparent;
  letter-spacing: 0.02em;
}
.admin-badge--default {
  background: var(--admin-grey-200);
  color: var(--admin-grey-800);
}
.admin-badge--primary {
  background: var(--admin-primary-light);
  color: var(--admin-primary);
}
.admin-badge--success {
  background: var(--admin-success-bg);
  color: var(--admin-success-text);
}
.admin-badge--error {
  background: var(--admin-error-bg);
  color: var(--admin-error-text);
}
.admin-badge--warn {
  background: var(--admin-warn-bg);
  color: var(--admin-warn-text);
}
.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-chip {
  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: 500;
  line-height: 1.3;
  border-radius: var(--admin-radius-full);
  border: 1px solid var(--admin-outline-variant);
  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: var(--admin-border);
}
.admin-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--admin-size-icon-sm);
  height: var(--admin-size-icon-sm);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--admin-text-secondary);
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--admin-fs-body);
  line-height: 1;
  transition: background var(--admin-duration-short) var(--admin-ease), color var(--admin-duration-short) var(--admin-ease);
}
.admin-chip__remove:hover {
  background: var(--admin-state-hover);
  color: var(--admin-text);
}
.admin-chip__remove:active {
  background: var(--admin-state-pressed);
}
.admin-chip__remove:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: 1px;
}
.admin-chip--success {
  border-color: rgba(var(--admin-success-rgb), 0.4);
  background: var(--admin-success-bg);
  color: var(--admin-success-text);
}
.admin-chip--error {
  border-color: rgba(var(--admin-error-rgb), 0.4);
  background: var(--admin-error-bg);
  color: var(--admin-error-text);
}
.admin-chip--warn {
  border-color: rgba(var(--admin-warn-rgb), 0.4);
  background: var(--admin-warn-bg);
  color: var(--admin-warn-text);
}
.admin-chip--premium {
  border-color: rgba(var(--admin-premium-rgb), 0.4);
  background: var(--admin-premium-bg);
  color: var(--admin-premium-text);
}

body.admin,
body.admin .ss-main,
body.admin .ss-content {
  --ss-primary-color: var(--admin-primary) !important;
  --ss-bg-color: var(--admin-white) !important;
  --ss-font-color: var(--admin-text) !important;
  --ss-placeholder-color: var(--admin-text-muted) !important;
  --ss-border-color: var(--admin-outline-variant) !important;
  --ss-focus-color: var(--admin-primary) !important;
  --ss-disabled-color: var(--admin-grey-200) !important;
  --ss-highlight-color: var(--admin-grey-200) !important;
}

body.admin .ss-main,
body.admin .ss-content,
body.admin .ss-main.admin-select,
body.admin .ss-content.admin-select,
body.admin .ss-main.admin-form__input,
body.admin .ss-content.admin-form__input,
body.admin .ss-main.admin-auth__input,
body.admin .ss-content.admin-auth__input,
.admin-components .ss-main.admin-select,
.admin-components .ss-content.admin-select {
  background-image: none !important;
  appearance: none !important;
}

body.admin .ss-main,
.admin-components .ss-main {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  min-height: var(--admin-size-icon-lg) !important;
  padding: var(--admin-space-2xs) var(--admin-space-sm) var(--admin-space-2xs) var(--admin-space) !important;
  border-radius: var(--admin-radius-sm) !important;
  font-size: var(--admin-fs-body-lg) !important;
  background-color: var(--admin-white) !important;
  border: 1px solid var(--admin-outline-variant) !important;
  color: var(--admin-text) !important;
  overflow: visible !important;
}
body.admin .ss-main:focus,
.admin-components .ss-main:focus {
  box-shadow: 0 0 0 1px var(--admin-primary) !important;
  border-color: var(--admin-primary) !important;
}

body.admin .ss-main.admin-form__input,
.admin-components .ss-main.admin-form__input {
  min-height: calc(2 * var(--admin-space-sm) + 1.5 * var(--admin-fs-body-lg)) !important;
  padding: var(--admin-space-sm) var(--admin-space) !important;
}

body.admin .ss-main .ss-values,
.admin-components .ss-main .ss-values {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

body.admin .ss-main .ss-arrow,
.admin-components .ss-main .ss-arrow {
  flex: 0 0 auto !important;
  margin-left: var(--admin-space-2xs) !important;
}

body.admin .ss-main .ss-values .ss-single,
.admin-components .ss-main .ss-values .ss-single {
  color: var(--admin-text) !important;
}

body.admin .ss-main .ss-values,
.admin-components .ss-main .ss-values {
  min-width: var(--admin-space-4xl) !important;
  overflow: visible !important;
}

body.admin .ss-main .ss-values .ss-placeholder,
.admin-components .ss-main .ss-values .ss-placeholder {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  padding-right: var(--admin-space-2xs) !important;
  color: var(--admin-text-muted) !important;
}

body.admin .ss-main .ss-arrow + .ss-arrow,
.admin-components .ss-main .ss-arrow + .ss-arrow {
  display: none !important;
}

body.admin .ss-content .ss-arrow,
body.admin .ss-content .ss-list .ss-option .ss-arrow,
body.admin .ss-content .ss-list .ss-optgroup .ss-arrow,
.admin-components .ss-content .ss-arrow,
.admin-components .ss-content .ss-list .ss-option .ss-arrow,
.admin-components .ss-content .ss-list .ss-optgroup .ss-arrow {
  display: none !important;
}

body.admin .ss-main .ss-arrow path,
.admin-components .ss-main .ss-arrow path {
  stroke: var(--admin-text-secondary) !important;
}

body.admin .ss-main .ss-deselect,
.admin-components .ss-main .ss-deselect {
  margin-left: var(--admin-space-2xs);
}

body.admin .ss-content,
.admin-components .ss-content {
  background-color: var(--admin-white) !important;
  border: 1px solid var(--admin-outline-variant) !important;
  border-radius: var(--admin-radius-sm) !important;
  box-shadow: var(--admin-elevation-2) !important;
  max-height: min(400px, 70vh) !important;
}

body.admin .ss-content .ss-list,
.admin-components .ss-content .ss-list {
  max-height: 320px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.admin .ss-content .ss-search,
.admin-components .ss-content .ss-search {
  border-bottom: 1px solid var(--admin-outline-variant) !important;
  background: var(--admin-grey-50) !important;
}

body.admin .ss-content .ss-search input,
.admin-components .ss-content .ss-search input {
  border: none !important;
  padding: var(--admin-space-sm) var(--admin-space) !important;
  font-size: var(--admin-fs-body-lg) !important;
  color: var(--admin-text) !important;
  background: var(--admin-white) !important;
}
body.admin .ss-content .ss-search input::placeholder,
.admin-components .ss-content .ss-search input::placeholder {
  color: var(--admin-text-muted) !important;
}

body.admin .ss-content .ss-list .ss-option,
.admin-components .ss-content .ss-list .ss-option {
  padding: var(--admin-space-sm) var(--admin-space) !important;
  font-size: var(--admin-fs-body-lg) !important;
  color: var(--admin-text) !important;
  border-left: none !important;
}

body.admin .ss-content .ss-list .ss-option:hover:not(.ss-disabled):not(.ss-selected),
body.admin .ss-content .ss-list .ss-option.ss-highlighted:not(.ss-selected),
.admin-components .ss-content .ss-list .ss-option:hover:not(.ss-disabled):not(.ss-selected),
.admin-components .ss-content .ss-list .ss-option.ss-highlighted:not(.ss-selected) {
  background-color: var(--admin-grey-100) !important;
  color: var(--admin-text) !important;
  border-left: none !important;
}

body.admin .ss-content .ss-list .ss-option.ss-selected,
.admin-components .ss-content .ss-list .ss-option.ss-selected {
  background-color: var(--admin-primary) !important;
  color: var(--admin-on-primary) !important;
  border-left: none !important;
}

body.admin .ss-content .ss-list .ss-option .ss-search-highlight,
.admin-components .ss-content .ss-list .ss-option .ss-search-highlight {
  background-color: var(--admin-grey-300) !important;
}

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

.admin-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

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

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

.admin-modal__title {
  margin: 0;
  font-size: 1.1rem;
}

.admin-modal__close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  color: #64748b;
  padding: 0 0.25rem;
}
.admin-modal__close:hover {
  color: #0f172a;
}

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

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

/**
 * Modal.ts(alert/confirm)용 스타일 – admin에서도 동일 클래스 사용.
 * home/components/_dpr-modal.scss 와 동일하게 admin 빌드에 포함.
 */
.admin-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__fallback {
  position: relative;
  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__fallback:hover {
  border-color: var(--admin-primary);
  background: rgba(var(--admin-primary-rgb), 0.06);
}
.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);
  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 {
  position: relative;
  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-icon {
  display: block;
  font-size: var(--admin-fs-menu);
  color: var(--admin-text-secondary);
  margin-bottom: var(--admin-space-sm);
}
.admin-file-uploader__dropzone-icon i {
  font-size: inherit;
}

.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__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.9);
  border-radius: inherit;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}
.admin-file-uploader__dropzone-loader .fa-spinner {
  font-size: 1.5rem;
  color: var(--admin-primary);
}

.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: 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-single-image-uploader {
  margin-top: var(--admin-space-sm);
}

.admin-single-image-uploader__rules {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space-sm);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  margin-bottom: var(--admin-space);
  padding: var(--admin-space-sm) var(--admin-space);
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius);
}
.admin-single-image-uploader__rules .admin-single-image-uploader__rules-icon {
  flex-shrink: 0;
  margin-top: 0.15em;
  color: var(--admin-primary);
  font-size: 1.1em;
}
.admin-single-image-uploader__rules strong {
  color: var(--admin-text);
}

.admin-single-image-uploader__box {
  padding: 0;
  border: none;
  border-radius: var(--admin-radius);
  background: transparent;
  overflow: visible;
}

.admin-single-image-uploader__body {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-lg);
  min-height: 0;
}

.admin-single-image-uploader__choice {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  min-height: 0;
  padding: 0;
}

.admin-single-image-uploader__choice .admin-file-uploader__dropzone {
  position: relative;
  width: 100%;
  min-height: 200px;
  padding: var(--admin-space-2xl) var(--admin-space-3xl);
  margin: 0;
  border: 2px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-grey-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
  transition: border-color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-single-image-uploader__choice .admin-file-uploader__dropzone:hover, .admin-single-image-uploader__choice .admin-file-uploader__dropzone--dragover {
  border-color: var(--admin-primary);
  background: rgba(var(--admin-primary-rgb), 0.06);
}
.admin-single-image-uploader__choice .admin-file-uploader__dropzone--disabled {
  pointer-events: none;
  opacity: 0.65;
  cursor: not-allowed;
}

.admin-single-image-uploader__choice .admin-file-uploader__dropzone-icon {
  font-size: var(--admin-fs-title);
  color: var(--admin-text-secondary);
  margin-bottom: var(--admin-space);
}

.admin-single-image-uploader__choice .admin-file-uploader__dropzone-text {
  font-size: var(--admin-fs-body);
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: var(--admin-space-2xs);
}

.admin-single-image-uploader__choice .admin-file-uploader__dropzone-hint {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
}

.admin-single-image-uploader__body .admin-file-uploader__list {
  margin: 0;
}

.admin-single-image-uploader__body .admin-file-uploader__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--admin-space);
  margin: 0;
  max-width: 320px;
}

.admin-single-image-uploader__body .admin-file-uploader__item {
  flex-direction: row;
  align-items: center;
  gap: var(--admin-space);
  padding: var(--admin-space);
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius);
  border: 1px solid var(--admin-border-light);
}

.admin-single-image-uploader__body .admin-file-uploader__thumb {
  width: 80px;
  min-width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--admin-radius-sm);
}

.admin-single-image-uploader__body .admin-file-uploader__meta {
  flex: 1;
  min-width: 0;
  margin-top: 0;
}

.admin-single-image-uploader__body .admin-file-uploader__actions {
  margin-top: 0;
  flex-shrink: 0;
}

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

.admin-single-video-uploader {
  margin-top: var(--admin-space-sm);
}

.admin-single-video-uploader__rules {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space-sm);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  margin-bottom: var(--admin-space);
  padding: var(--admin-space-sm) var(--admin-space);
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius);
}
.admin-single-video-uploader__rules .admin-single-video-uploader__rules-icon {
  flex-shrink: 0;
  margin-top: 0.15em;
  color: var(--admin-primary);
  font-size: 1.1em;
}
.admin-single-video-uploader__rules strong {
  color: var(--admin-text);
}

.admin-single-video-uploader__box {
  padding: 0;
  border: none;
  border-radius: var(--admin-radius);
  background: transparent;
  overflow: visible;
}

.admin-single-video-uploader__body {
  min-height: 0;
}

.admin-single-video-uploader__choice {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  min-height: 0;
  padding: 0;
  margin-bottom: var(--admin-space);
}

.admin-single-video-uploader__choice .admin-file-uploader__dropzone {
  position: relative;
  width: 100%;
  min-height: 120px;
  padding: var(--admin-space-xl) var(--admin-space-2xl);
  margin: 0;
  border: 2px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-grey-100);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
  transition: border-color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-single-video-uploader__choice .admin-file-uploader__dropzone:hover, .admin-single-video-uploader__choice .admin-file-uploader__dropzone--dragover {
  border-color: var(--admin-primary);
  background: rgba(var(--admin-primary-rgb), 0.06);
}
.admin-single-video-uploader__choice .admin-file-uploader__dropzone--disabled {
  pointer-events: none;
  opacity: 0.65;
  cursor: not-allowed;
}

.admin-single-video-uploader__choice .admin-file-uploader__dropzone-icon,
.admin-single-video-uploader__choice .admin-file-uploader__dropzone-text,
.admin-single-video-uploader__choice .admin-file-uploader__dropzone-hint {
  font-size: inherit;
  color: var(--admin-text-secondary);
}

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

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

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

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

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

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

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

.admin-si-deep__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

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

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

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

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

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

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

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

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

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

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

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

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

.admin-si-deep__ta {
  display: block;
  margin: 0;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  width: 100%;
  min-height: 460px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  tab-size: 4;
}

.admin-si-deep__ta {
  resize: vertical;
  background: #fff !important;
  color: #1a1a1a;
  caret-color: #1a1a1a;
}
.admin-si-deep__ta::placeholder {
  color: #8a8f98;
}
.admin-si-deep__ta::selection {
  background: rgba(var(--admin-primary-rgb), 0.2);
}
.admin-si-deep__ta:focus {
  outline: 2px solid rgba(var(--admin-primary-rgb), 0.35);
  outline-offset: -1px;
}

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

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

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

.admin-si-deep__panel {
  display: none;
  background: #fff;
}
.admin-si-deep__panel.is-active {
  display: block;
}

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

.admin-dashboard {
  padding: 0;
  max-width: 100%;
}

.admin-dashboard__header {
  margin-bottom: var(--admin-space-2xl);
}

.admin-dashboard__title {
  margin: 0 0 var(--admin-space-2xs);
  font-size: var(--admin-fs-menu);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--admin-text);
}

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

.admin-dashboard__section {
  margin-bottom: var(--admin-space-2xl);
}
.admin-dashboard__section:last-child {
  margin-bottom: 0;
}

.admin-dashboard__section-title {
  margin: 0 0 var(--admin-space);
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--admin-text-muted);
}

.admin-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--admin-space);
}

.admin-dashboard__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--admin-space-lg) var(--admin-space-lg);
  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-dashboard__card:hover {
  box-shadow: var(--admin-elevation-2);
  background: var(--admin-white);
  border-color: var(--admin-border);
  transform: translateY(-2px);
}
.admin-dashboard__card:active {
  transform: translateY(0);
  box-shadow: var(--admin-elevation-1);
}
.admin-dashboard__card:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: var(--admin-focus-ring-offset);
}
.admin-dashboard__card--highlight {
  border-color: var(--admin-grey-300);
  background: var(--admin-grey-50);
}
.admin-dashboard__card--wide {
  grid-column: 1/-1;
  flex-direction: row;
  align-items: center;
  gap: var(--admin-space);
}
.admin-dashboard__card--badge .admin-dashboard__card-badge {
  display: inline-flex;
}

.admin-dashboard__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--admin-size-icon-lg);
  height: var(--admin-size-icon-lg);
  margin-bottom: var(--admin-space);
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
  border-radius: var(--admin-radius-sm);
  font-size: var(--admin-fs-body);
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}

.admin-dashboard__card:hover .admin-dashboard__card-icon {
  background: var(--admin-grey-200);
  color: var(--admin-text);
}

.admin-dashboard__card--wide .admin-dashboard__card-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.admin-dashboard__card-body {
  flex: 1;
  min-width: 0;
}

.admin-dashboard__card-title {
  margin: 0;
  font-size: var(--admin-fs-base);
  font-weight: 600;
  color: var(--admin-text);
  line-height: 1.3;
}

.admin-dashboard__card-desc {
  margin: var(--admin-space-2xs) 0 0;
  font-size: var(--admin-fs-sm);
  font-weight: 500;
  color: var(--admin-text-secondary);
  line-height: 1.4;
}

.admin-dashboard__card-badge {
  display: none;
  position: absolute;
  top: var(--admin-space);
  right: var(--admin-space);
  min-width: var(--admin-fs-body-lg);
  height: var(--admin-fs-body-lg);
  padding: 0 var(--admin-space-2xs);
  align-items: center;
  justify-content: center;
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  color: #fff;
  background: var(--admin-text);
  border-radius: var(--admin-radius-full);
}

@media (max-width: 640px) {
  .admin-dashboard__grid {
    grid-template-columns: 1fr;
  }
}
.admin-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--admin-main-bg);
  padding: var(--admin-space-lg);
}

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

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

.admin-auth__form {
  margin: 0;
}

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

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

.admin-auth__input {
  width: 100%;
  padding: var(--admin-space-sm) var(--admin-space);
  border: 1px solid var(--admin-outline-variant);
  border-radius: var(--admin-radius-sm);
  font-size: var(--admin-fs-body-lg);
  font-family: inherit;
  box-sizing: border-box;
  color: var(--admin-text);
  background: var(--admin-white);
  transition: border-color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-auth__input::placeholder {
  color: var(--admin-text-muted);
}
.admin-auth__input:hover:not(:focus) {
  border-color: var(--admin-border);
  background: var(--admin-grey-50);
}
.admin-auth__input:focus {
  outline: none;
  border-color: var(--admin-primary);
  border-width: 2px;
  padding: calc(var(--admin-space-sm) - 1px) calc(var(--admin-space) - 1px);
  box-shadow: 0 0 0 1px var(--admin-primary);
}

.admin-auth__password-wrap {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: nowrap;
  min-height: var(--admin-size-input-height);
  height: auto;
  border-radius: var(--admin-radius-sm);
  border: 1px solid var(--admin-outline-variant);
  background: var(--admin-white);
  transition: border-color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
  overflow: hidden;
}
.admin-auth__password-wrap:hover {
  border-color: var(--admin-border);
  background: var(--admin-grey-50);
}
.admin-auth__password-wrap:focus-within {
  border-color: var(--admin-primary);
  border-width: 2px;
  box-shadow: 0 0 0 1px var(--admin-primary);
}
.admin-auth__password-wrap .admin-auth__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--admin-size-input-height);
  border: none;
  border-radius: 0;
  padding-right: var(--admin-size-input-height);
  padding-left: var(--admin-space);
  background: transparent;
  box-shadow: none;
}
.admin-auth__password-wrap .admin-auth__input:focus {
  box-shadow: none;
}

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

.admin-auth__link {
  font-size: var(--admin-fs-body);
  font-weight: 500;
  color: var(--admin-primary);
  text-decoration: none;
  border-radius: var(--admin-radius-xs);
  padding: var(--admin-space-3xs) var(--admin-space-2xs);
  margin: calc(var(--admin-space-3xs) * -1) calc(var(--admin-space-2xs) * -1);
  transition: background var(--admin-duration) var(--admin-ease), color var(--admin-duration) var(--admin-ease);
}
.admin-auth__link:hover {
  color: var(--admin-primary-hover);
  background: var(--admin-state-hover);
}
.admin-auth__link:active {
  background: var(--admin-state-pressed);
}
.admin-auth__link:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: 2px;
}

.admin-auth__submit {
  width: 100%;
  padding: var(--admin-space) var(--admin-space);
  margin-top: var(--admin-space-sm);
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  border: none;
  border-radius: var(--admin-radius-sm);
  font-size: var(--admin-fs-body-lg);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-auth__submit:hover {
  background: var(--admin-primary-hover);
  box-shadow: var(--admin-elevation-1);
}
.admin-auth__submit:active {
  background: var(--admin-grey-900);
}
.admin-auth__submit:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: var(--admin-focus-ring-offset);
}

.admin-auth__footer {
  margin-top: var(--admin-space-lg);
  padding-top: var(--admin-space);
  border-top: 1px solid var(--admin-border-light);
  text-align: center;
  font-size: var(--admin-fs-body);
  font-weight: 500;
  color: var(--admin-text-secondary);
}

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

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--admin-card-bg);
  border-radius: var(--admin-radius);
  overflow: hidden;
  box-shadow: var(--admin-elevation-1);
  border: 1px solid var(--admin-border-light);
}

.admin-table th,
.admin-table td {
  padding: var(--admin-space) var(--admin-space-lg);
  text-align: left;
  border-bottom: 1px solid var(--admin-border-light);
}

.admin-table th {
  background: var(--admin-grey-50);
  font-weight: 600;
  font-size: var(--admin-fs-base);
  letter-spacing: 0.02em;
  color: var(--admin-text-secondary);
}

.admin-table tbody tr {
  transition: background var(--admin-duration-short) var(--admin-ease);
}
.admin-table tbody tr:hover {
  background: var(--admin-grey-50);
}
.admin-table tbody tr:last-child td {
  border-bottom: none;
}

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

.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: 48px;
  object-fit: contain;
  object-position: center left;
  aspect-ratio: auto;
}

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

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

.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: 48px;
  aspect-ratio: auto;
}

.admin-table__actions {
  display: flex;
  gap: var(--admin-space-sm);
  flex-wrap: wrap;
}

.admin-table__btn {
  padding: var(--admin-space-2xs) var(--admin-space);
  font-size: var(--admin-fs-body);
  font-weight: 500;
  border-radius: var(--admin-radius-sm);
  text-decoration: none;
  border: 1px solid var(--admin-outline-variant);
  background: var(--admin-card-bg);
  color: var(--admin-text);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-table__btn:hover {
  background: var(--admin-state-hover);
  border-color: var(--admin-border);
}
.admin-table__btn:active {
  background: var(--admin-state-pressed);
}
.admin-table__btn:focus-visible {
  outline: var(--admin-focus-ring);
  outline-offset: 2px;
}
.admin-table__btn--primary {
  background: var(--admin-primary);
  border-color: transparent;
  color: var(--admin-on-primary);
}
.admin-table__btn--primary:hover {
  background: var(--admin-primary-hover);
}
.admin-table__btn--primary:active {
  background: var(--admin-grey-800);
}
.admin-table__btn--danger {
  background: var(--admin-error);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.admin-table__btn--danger:hover {
  background: var(--admin-error-hover);
  color: #fff;
}
.admin-table__btn--danger:active {
  background: var(--admin-error-active);
  color: #fff;
}
.admin-table__btn--danger:focus-visible {
  outline-color: var(--admin-error);
}

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

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

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

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

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

@media (max-width: 992px) {
  .admin-page__breadcrumb {
    display: block;
  }
}
.admin-invite-created-banner {
  margin-bottom: var(--admin-space-lg);
  padding: var(--admin-space-lg);
  background: rgba(22, 101, 52, 0.08);
  border: 1px solid rgba(22, 101, 52, 0.22);
  border-radius: var(--admin-radius);
}

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

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

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

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

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

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

.admin-page__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-sm);
  margin-bottom: var(--admin-space-lg);
}

.admin-empty {
  padding: var(--admin-space-2xl) var(--admin-space-lg);
  text-align: center;
  background: var(--admin-card-bg);
  border-radius: var(--admin-radius);
  border: 1px dashed var(--admin-border);
}

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

.admin-index-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--admin-space) var(--admin-space-lg);
  margin-bottom: var(--admin-space-lg);
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-card-bg);
  border-radius: var(--admin-radius);
  border: 1px solid var(--admin-border-light);
}

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

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

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

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

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

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

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

.admin-pagination__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.35rem 0.5rem;
  font-size: var(--admin-fs-body);
  font-weight: 500;
  color: var(--admin-text);
  background: var(--admin-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.admin-pagination__btn:hover:not(.admin-pagination__btn--disabled):not(.admin-pagination__btn--current) {
  background: var(--admin-bg-hover);
  border-color: var(--admin-border);
}
.admin-pagination__btn--current {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
  color: #fff;
  cursor: default;
}
.admin-pagination__btn--disabled {
  color: var(--admin-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

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

.admin-table-wrap {
  border-radius: var(--admin-radius);
  overflow: hidden;
  box-shadow: var(--admin-elevation-1);
  border: 1px solid var(--admin-border-light);
  background: var(--admin-card-bg);
}

.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-form {
  max-width: 640px;
  padding-bottom: var(--admin-space-lg);
}

.admin-form__section {
  margin-bottom: var(--admin-space-2xl);
  padding-bottom: var(--admin-space-lg);
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-form__section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

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

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

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

.admin-form__avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--admin-grey-200);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.admin-form__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-form__avatar-initial {
  font-size: 2rem;
  font-weight: 600;
  color: var(--admin-text-secondary);
  line-height: 1;
}

.admin-form__input--file {
  max-width: 280px;
}

.admin-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--admin-space);
  margin-bottom: 0;
}
@media (max-width: 520px) {
  .admin-form__row {
    grid-template-columns: 1fr;
  }
}
.admin-form__row--gap {
  display: flex;
  grid-template-columns: unset;
}

.admin-form__hint {
  margin: var(--admin-space-sm) 0 var(--admin-space-lg);
  font-size: var(--admin-fs-sm);
  line-height: 1.4;
  color: var(--admin-text-secondary);
  word-break: keep-all;
  overflow-wrap: normal;
}
.admin-form__hint--readable {
  margin-top: 0.25rem;
  font-size: 0.875rem;
}
.admin-form__hint--rules {
  padding: var(--admin-space-sm) var(--admin-space);
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius);
  border-left: 3px solid var(--admin-primary);
  margin-bottom: var(--admin-space);
}

.admin-form__group {
  margin-bottom: 0;
}

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

.admin-form__label {
  display: block;
  margin-bottom: var(--admin-space-2xs);
  font-size: var(--admin-fs-body);
  font-weight: 500;
  color: var(--admin-text-secondary);
}

.admin-form__required {
  color: var(--admin-error);
}

.admin-form__input {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: calc(2 * var(--admin-space-sm) + 1.5 * var(--admin-fs-body-lg));
  padding: var(--admin-space-sm) var(--admin-space);
  font-size: var(--admin-fs-body-lg);
  line-height: 1.5;
  color: var(--admin-text);
  background: var(--admin-white);
  border: 1px solid var(--admin-outline-variant);
  border-radius: var(--admin-radius-sm);
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-form__input::placeholder {
  color: var(--admin-text-muted);
}
.admin-form__input:hover:not(:disabled):not(:focus) {
  border-color: var(--admin-border);
  background: var(--admin-grey-50);
}
.admin-form__input:focus {
  outline: none;
  border-color: var(--admin-primary);
  border-width: 2px;
  padding: calc(var(--admin-space-sm) - 1px) calc(var(--admin-space) - 1px);
  box-shadow: 0 0 0 1px var(--admin-primary);
}
.admin-form__input:disabled {
  background: var(--admin-grey-100);
  color: var(--admin-text-muted);
  cursor: not-allowed;
}

.admin-form__textarea {
  min-height: 100px;
  resize: vertical;
}

.admin-form__checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-space-sm);
  font-size: var(--admin-fs-body-lg);
  font-weight: 500;
  color: var(--admin-text);
  cursor: pointer;
}
.admin-form__checkbox-wrap input[type=checkbox] {
  width: var(--admin-size-icon-sm);
  height: var(--admin-size-icon-sm);
  margin: 0;
  accent-color: var(--admin-primary);
  cursor: pointer;
}

.admin-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-sm);
  margin-top: var(--admin-space-lg);
  padding-top: var(--admin-space);
  padding-bottom: 0;
  border-top: 1px solid var(--admin-border-light);
  border-bottom: none;
  /* 섹션 바로 다음에 오면 보더 중복 제거: 섹션 border-bottom만 사용 */
}
.admin-form__section + .admin-form__actions {
  border-top: none;
  margin-top: 0;
  padding-top: var(--admin-space-lg);
}

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

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

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

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

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

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

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

.admin-form__section-badge {
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  color: var(--admin-text-secondary);
  margin-left: var(--admin-space-2xs);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.admin-user-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-user-edit-tabs__tab:hover {
  color: var(--admin-text);
}
.admin-user-edit-tabs__tab--active {
  color: var(--admin-primary);
  font-weight: 600;
  border-bottom-color: var(--admin-primary);
}

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

.admin-form__actions--page {
  margin-top: var(--admin-space);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.admin-detail__list {
  margin: 0;
}

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

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

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

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

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

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

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

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

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

.admin-comp-section__title {
  margin: 0 0 var(--admin-space);
  font-size: var(--admin-fs-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--admin-text);
  padding-bottom: var(--admin-space-sm);
  border-bottom: 1px solid var(--admin-border-light);
}

.admin-comp-section__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space);
  align-items: center;
}
.admin-comp-section__row--col {
  flex-direction: column;
  align-items: stretch;
  max-width: 400px;
}

.admin-comp-section__note {
  margin: var(--admin-space) 0 0;
  font-size: var(--admin-fs-sm);
  font-weight: 500;
  color: var(--admin-text-secondary);
  word-break: keep-all;
  overflow-wrap: normal;
}
.admin-comp-section__note code {
  padding: var(--admin-space-3xs) var(--admin-space-2xs);
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-xs);
  font-size: var(--admin-fs-sm);
}

.admin-comp-section--file-uploader .admin-file-uploader-demo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--admin-space-lg);
  margin-top: var(--admin-space);
}

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

.admin-file-uploader-demo__item .admin-input-label {
  font-weight: 600;
  color: var(--admin-text);
}

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

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

.admin-file-uploader__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--admin-space-sm);
  padding: var(--admin-space);
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius);
  border: 1px solid var(--admin-border-light);
}

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

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

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

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

.admin-file-uploader__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: var(--admin-space);
  border: 2px dashed var(--admin-border);
  border-radius: var(--admin-radius);
  background: var(--admin-grey-100);
  cursor: pointer;
  transition: border-color var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease);
}
.admin-file-uploader__dropzone:hover, .admin-file-uploader__dropzone--dragover {
  border-color: var(--admin-primary);
  background: rgba(var(--admin-primary-rgb), 0.06);
}
.admin-file-uploader__dropzone--disabled {
  pointer-events: none;
  opacity: 0.65;
  cursor: not-allowed;
}

.admin-file-uploader__dropzone-text {
  font-weight: 600;
  color: var(--admin-text);
  margin-bottom: var(--admin-space-2xs);
}

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

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

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

.admin-file-uploader__size {
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-secondary);
  margin-top: var(--admin-space-3xs);
}

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

.admin-datetime-input-wrap,
.admin-time-input-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--admin-border, #e2e8f0);
  border-radius: var(--admin-radius-sm);
  background: #fff;
  cursor: pointer;
}
.admin-datetime-input-wrap:focus-within,
.admin-time-input-wrap:focus-within {
  border-color: var(--admin-primary, #3b82f6);
  outline: 1px solid var(--admin-primary, #3b82f6);
}

.admin-datetime-input,
.admin-time-input {
  flex: 1;
  border: none;
  background: none;
  cursor: pointer;
}

.admin-datetime-input__icon,
.admin-time-input__icon {
  padding: 0 var(--admin-space);
  color: var(--admin-text-secondary, #64748b);
  pointer-events: none;
}

.admin-comp-editor-wrap .ql-editor {
  min-height: 160px;
}

.admin-docs {
  display: grid;
  grid-template-columns: 220px 1fr 200px;
  gap: var(--admin-space-3xl);
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--admin-space-2xl) var(--admin-space-lg);
  font-size: var(--admin-fs-body);
  line-height: 1.65;
}

.admin-docs__tabs {
  grid-column: 1/-1;
  display: flex;
  gap: 0;
  margin-bottom: var(--admin-space);
  border-bottom: 2px solid var(--admin-border-light);
  background: var(--admin-main-bg);
}

.admin-docs__tab {
  padding: var(--admin-space) var(--admin-space-lg);
  font-size: var(--admin-fs-body);
  font-weight: 600;
  color: var(--admin-text-secondary);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-docs__tab:hover {
  color: var(--admin-text);
}
.admin-docs__tab.is-active {
  color: var(--admin-primary);
  border-bottom-color: var(--admin-primary);
}

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

.admin-docs__tab-panel-title {
  margin: 0 0 var(--admin-space-sm);
  font-size: var(--admin-fs-menu);
  font-weight: 600;
  color: var(--admin-text);
}

.admin-docs__tab-panel-lead {
  margin: 0 0 var(--admin-space-xl);
  font-size: var(--admin-fs-body);
  color: var(--admin-text-secondary);
}

.admin-docs__nav-group {
  margin-bottom: var(--admin-space);
  list-style: none;
}

.admin-docs__nav-group-title {
  display: block;
  padding: var(--admin-space-2xs) 0 var(--admin-space-2xs) var(--admin-space-sm);
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--admin-text-muted);
}

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

.admin-docs__nav {
  padding: var(--admin-space) var(--admin-space-sm) var(--admin-space-xl) 0;
  margin: 0 var(--admin-space-sm) 0 0;
  border-right: 1px solid var(--admin-border-light);
  background: var(--admin-main-bg);
  z-index: 2;
}

.admin-docs__nav-title {
  margin: 0 0 var(--admin-space);
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--admin-text-muted);
}

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

.admin-docs__nav-list li {
  margin-bottom: 0;
}

.admin-docs__nav-link {
  display: block;
  padding: var(--admin-space-2xs) 0 var(--admin-space-2xs) var(--admin-space-sm);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-docs__nav-link:hover {
  color: var(--admin-text);
  border-left-color: var(--admin-grey-300);
}

.admin-docs__main {
  min-width: 0;
  max-width: 720px;
  padding: var(--admin-space) var(--admin-space-lg);
  background: var(--admin-main-bg);
  border-radius: var(--admin-radius-sm);
}

.admin-docs__header {
  margin-bottom: var(--admin-space-2xl);
  padding-bottom: var(--admin-space-xl);
  border-bottom: 1px solid var(--admin-border-light);
}

.admin-docs__title {
  margin: 0 0 var(--admin-space);
  font-size: var(--admin-fs-title);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--admin-text);
}

.admin-docs__lead {
  margin: 0;
  font-size: var(--admin-fs-body-lg);
  line-height: 1.6;
  color: var(--admin-text-secondary);
}

.admin-docs__section {
  margin-bottom: var(--admin-space-2xl);
  padding-bottom: var(--admin-space-xl);
  border-bottom: 1px solid var(--admin-border-light);
}
.admin-docs__section:last-child {
  border-bottom: none;
}

.admin-docs__section-title {
  margin: 0 0 var(--admin-space);
  font-size: var(--admin-fs-menu);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--admin-text);
  scroll-margin-top: calc(var(--admin-header-height) + var(--admin-space-lg));
}

.admin-docs__subsection {
  margin: var(--admin-space-xl) 0 var(--admin-space);
  font-size: var(--admin-fs-body-lg);
  font-weight: 600;
  color: var(--admin-text);
  scroll-margin-top: calc(var(--admin-header-height) + var(--admin-space-lg));
}
.admin-docs__subsection:first-child {
  margin-top: 0;
}

.admin-docs__subsubsection {
  margin: var(--admin-space-lg) 0 var(--admin-space-sm);
  font-size: var(--admin-fs-body);
  font-weight: 600;
  color: var(--admin-text-secondary);
}

.admin-docs__main p {
  margin: 0 0 var(--admin-space);
  font-size: inherit;
  line-height: 1.7;
  color: var(--admin-text);
}

.admin-docs__main code {
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.15em 0.45em;
  background: var(--admin-grey-100);
  border-radius: var(--admin-radius-xs);
  color: var(--admin-text);
  border: 1px solid var(--admin-grey-200);
}

.admin-docs__main a {
  color: var(--admin-primary);
  text-decoration: none;
  transition: color var(--admin-duration) var(--admin-ease);
}
.admin-docs__main a:hover {
  color: var(--admin-primary-hover);
  text-decoration: underline;
}

.admin-docs__list {
  margin: 0 0 var(--admin-space);
  padding-left: 1.5em;
}
.admin-docs__list li {
  margin-bottom: var(--admin-space-2xs);
  line-height: 1.65;
}

.admin-docs__list--ordered {
  list-style: decimal;
  padding-left: 1.75em;
}
.admin-docs__list--ordered li {
  margin-bottom: var(--admin-space-sm);
}

.admin-docs__table {
  width: 100%;
  margin: var(--admin-space) 0;
  border-collapse: collapse;
  font-size: var(--admin-fs-sm);
  line-height: 1.5;
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius-sm);
  overflow: hidden;
  box-shadow: var(--admin-elevation-1);
}

.admin-docs__table thead {
  background: var(--admin-grey-50);
  border-bottom: 1px solid var(--admin-border-light);
}

.admin-docs__table th {
  padding: var(--admin-space-sm) var(--admin-space);
  font-weight: 600;
  text-align: left;
  color: var(--admin-text);
  font-size: var(--admin-fs-xs);
  text-transform: none;
  letter-spacing: 0;
}

.admin-docs__table td {
  padding: var(--admin-space-sm) var(--admin-space);
  border-bottom: 1px solid var(--admin-border-light);
  color: var(--admin-text);
  vertical-align: top;
}
.admin-docs__table td:first-child {
  color: var(--admin-text-secondary);
  font-weight: 500;
  white-space: nowrap;
  width: 1%;
}

.admin-docs__table tbody tr {
  transition: background var(--admin-duration) var(--admin-ease);
}
.admin-docs__table tbody tr:last-child td {
  border-bottom: none;
}
.admin-docs__table tbody tr:hover {
  background: var(--admin-grey-50);
}

.admin-docs__table code {
  font-size: 0.88em;
  padding: 0.12em 0.35em;
  word-break: break-all;
}

.admin-docs__hero {
  position: relative;
  overflow: hidden;
  padding: var(--admin-space-2xl);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.04), rgba(17, 24, 39, 0.01));
}

.admin-docs__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--admin-space-sm);
  padding: 0.35rem 0.7rem;
  border-radius: var(--admin-radius-full);
  background: var(--admin-grey-100);
  color: var(--admin-text-secondary);
  font-size: var(--admin-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-docs__hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--admin-space-sm);
  margin-top: var(--admin-space-lg);
}

.admin-docs__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--admin-space-lg);
  border-radius: var(--admin-radius-full);
  background: var(--admin-text);
  color: #fff !important;
  font-size: var(--admin-fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--admin-duration) var(--admin-ease), background var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease);
}
.admin-docs__button:hover {
  background: var(--admin-primary);
  transform: translateY(-1px);
  text-decoration: none !important;
  box-shadow: var(--admin-elevation-2);
}
.admin-docs__button--secondary {
  background: #fff;
  color: var(--admin-text) !important;
  border: 1px solid var(--admin-border-light);
}

.admin-docs__callout,
.admin-docs__tip {
  margin: 0 0 var(--admin-space-lg);
  padding: var(--admin-space-lg);
  border-radius: var(--admin-radius);
  border: 1px solid var(--admin-border-light);
}

.admin-docs__callout {
  background: rgba(15, 23, 42, 0.04);
}
.admin-docs__callout strong {
  display: inline-block;
  margin-bottom: var(--admin-space-2xs);
  color: var(--admin-text);
}
.admin-docs__callout p:last-child {
  margin-bottom: 0;
}

.admin-docs__tip {
  background: rgba(255, 255, 255, 0.92);
}
.admin-docs__tip strong {
  display: inline-block;
  margin-bottom: var(--admin-space-2xs);
  color: var(--admin-primary);
}
.admin-docs__tip p:last-child {
  margin-bottom: 0;
}

.admin-docs__card-grid,
.admin-docs__link-grid {
  display: grid;
  gap: var(--admin-space);
}

.admin-docs__card-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.admin-docs__link-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

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

.admin-docs__mini-card p:last-child {
  margin-bottom: 0;
}

.admin-docs__link-card {
  display: flex;
  flex-direction: column;
  gap: var(--admin-space-2xs);
  text-decoration: none;
  transition: transform var(--admin-duration) var(--admin-ease), box-shadow var(--admin-duration) var(--admin-ease), border-color var(--admin-duration) var(--admin-ease);
}
.admin-docs__link-card strong {
  color: var(--admin-text);
  font-size: var(--admin-fs-body);
}
.admin-docs__link-card span {
  color: var(--admin-text-secondary);
  line-height: 1.6;
}
.admin-docs__link-card:hover {
  transform: translateY(-2px);
  border-color: var(--admin-border);
  box-shadow: var(--admin-elevation-2);
  text-decoration: none !important;
}

.admin-docs--ops-manual .admin-docs__section:first-of-type {
  padding-top: 0;
}

.admin-docs__toc {
  padding: var(--admin-space) 0 var(--admin-space-xl) var(--admin-space-sm);
  margin: 0 0 0 var(--admin-space-sm);
  border-left: 1px solid var(--admin-border-light);
  background: var(--admin-main-bg);
  z-index: 2;
}

.admin-docs__toc-title {
  margin: 0 0 var(--admin-space);
  font-size: var(--admin-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--admin-text-muted);
}

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

.admin-docs__toc-list li {
  margin-bottom: var(--admin-space-2xs);
}

.admin-docs__toc-link {
  display: block;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  text-decoration: none;
  padding: var(--admin-space-2xs) 0;
  transition: color var(--admin-duration) var(--admin-ease);
}
.admin-docs__toc-link:hover {
  color: var(--admin-primary);
}

@media (max-width: 992px) {
  .admin-docs {
    grid-template-columns: 1fr;
    gap: var(--admin-space-xl);
    padding: var(--admin-space) var(--admin-space);
  }
  .admin-docs__nav {
    position: static;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 0 0 var(--admin-space);
    margin-bottom: var(--admin-space);
    border-right: none;
    border-bottom: 1px solid var(--admin-border-light);
    background: transparent;
  }
  .admin-docs__main {
    max-width: none;
    padding: 0;
  }
  .admin-docs__hero {
    padding: var(--admin-space-xl);
  }
  .admin-docs__hero-actions,
  .admin-docs__link-grid,
  .admin-docs__card-grid {
    grid-template-columns: 1fr;
  }
  .admin-docs__table {
    font-size: 1.15rem;
  }
  .admin-docs__table th,
  .admin-docs__table td {
    padding: var(--admin-space) var(--admin-space-sm);
  }
  .admin-docs__table td:first-child {
    white-space: normal;
  }
  .admin-docs__toc {
    position: static;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: var(--admin-space) 0 0;
    border-left: none;
    border-top: 1px solid var(--admin-border-light);
    background: transparent;
  }
}
.admin-notifications {
  max-width: 800px;
  padding-bottom: var(--admin-space-2xl);
}

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

.admin-notifications__title {
  margin: 0 0 var(--admin-space-2xs);
  font-size: var(--admin-fs-title);
  font-weight: 600;
  color: var(--admin-text);
}

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

.admin-notifications__list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--admin-card-bg);
  border: 1px solid var(--admin-border-light);
  border-radius: var(--admin-radius);
  overflow: hidden;
}

.admin-notifications__item {
  display: flex;
  align-items: flex-start;
  gap: var(--admin-space);
  padding: var(--admin-space) var(--admin-space-lg);
  border-bottom: 1px solid var(--admin-border-light);
  min-height: 72px;
}
.admin-notifications__item:last-child {
  border-bottom: none;
}
.admin-notifications__item--read {
  background: var(--admin-grey-50);
}

.admin-notifications__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--admin-grey-300);
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-notifications__avatar-letter {
  font-size: var(--admin-fs-body-lg);
  font-weight: 600;
  color: var(--admin-white);
  line-height: 1;
}

.admin-notifications__body {
  flex: 1;
  min-width: 0;
}

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

.admin-notifications__actor {
  margin-right: 0.25em;
  font-weight: 600;
}

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

.admin-notifications__meta {
  margin: 0 0 var(--admin-space-2xs);
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
}

.admin-notifications__target {
  display: inline-block;
  margin-right: 0.5em;
}

.admin-notifications__time {
  margin: 0;
  font-size: var(--admin-fs-xs);
  color: var(--admin-text-tertiary);
}

.admin-notifications__date {
  flex-shrink: 0;
  font-size: var(--admin-fs-sm);
  color: var(--admin-text-secondary);
  white-space: nowrap;
}

/*# sourceMappingURL=style.css.map */