@charset "UTF-8";
p {
  word-break: keep-all;
}
/* style.css - 디자인 토큰은 tokens.css를 우선 참조합니다. */

@font-face {
  font-family: "Pretendard GOV";
  src: url("/font/PretendardGOV-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard GOV";
  src: url("/font/PretendardGOV-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard GOV";
  src: url("/font/PretendardGOV-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pretendard GOV";
  src: url("/font/PretendardGOV-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===================== 전역 배경색 ===================== */
/* [Critical] 브라우저 기본 흰색 배경이 비치는 문제를 방지하기 위해
   html에 다크모드 기본 배경색을 직접 지정합니다. */
html {
  background-color: var(--bg-deep);
}

/* [수정] 스크롤바 설정 — .page-content가 position:fixed에서 margin-top 방식으로 변경되면서
 * 실제 스크롤이 발생하는 컨테이너가 body로 바뀌었습니다.
 * Firefox 전용 */
@-moz-document url-prefix() {
  body {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--bg-deep);
  }
}

/* Webkit(Chrome, Edge, Safari) 호환 — body 스크롤바 커스텀 */
body::-webkit-scrollbar {
  width: 8px;
}

body::-webkit-scrollbar-track {
  background: var(--bg-deep);
}

body::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
  background: #2563eb;
}

body::-webkit-scrollbar-button {
  display: none;
}

/* 모바일에서 스크롤바 숨김 */
@media (max-width: 900px) {
  body::-webkit-scrollbar {
    display: none;
  }
  body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
}

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

html,
body {
  min-width: 320px;
  /* [추가] 모바일 환경에서 100vh 계산 오류 방지 (iOS 주소창 포함 문제) */
  height: 100%;
}

/* --- [Background Canvas Style] --- */
#canvas-3d {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* Default Dark Mode Gradient */
  background: radial-gradient(circle at 50% 50%, #0f172a 0%, #000000 100%);
  transition: background 0.3s;
}

/* Light Mode Canvas Background */
.light-mode #canvas-3d {
  opacity: 1;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, #e2e8f0 100%);
}

/* Light mode specific element adjustments */
.light-mode .hero h1 {
  background: linear-gradient(135deg, #0f172a 0%, #475569 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.light-mode header {
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--glass-border);
}

.light-mode .logo {
  color: var(--text-main);
}

/* .light-mode .btn-outline, .light-mode .btn-sol-outline { ... } ((btn.outline 의 light-mode 보정으로 통합)) */
/* .light-mode .btn-outline:hover, .light-mode .btn-sol-outline:hover { ... } ((btn.outline:hover 의 light-mode 보정으로 통합)) */

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

body {
  /* [Critical] Make body transparent so canvas behind is visible */
  background-color: transparent;
  color: var(--text-main);
  font-family: "Pretendard", sans-serif;
  line-height: 1.6;
  transition: color 0.3s;
  /* [수정] iOS Safari에서 position:fixed + overflow:hidden 조합이 레이아웃을 망가뜨리는 문제 방지.
   * body overflow를 hidden으로 막지 않고, .page-content에서만 스크롤을 제어합니다. */
  overflow-x: hidden;
}

/* ===================== 콘텐츠 스크롤 래퍼(Page Content Wrapper) =====================
 * body 대신 헤더 아래 영역에서만 스크롤이 발생하도록 하는 래퍼입니다.
 * 모든 일반(사용자) 페이지의 <main>, <section>, <footer>를 이 div로 감싸세요.
 *
 * [변경 사유] 이전 방식(position: fixed + overflow-y: auto)은 iOS Safari 및
 * 일부 Android 브라우저에서 스크롤 컨텍스트가 비정상적으로 처리되어
 * 콘텐츠가 보이지 않거나 레이아웃이 깨지는 문제가 있었습니다.
 * margin-top 방식으로 변경하여 모든 모바일 환경에서 안정적으로 동작합니다.
 * ================================================================= */
.page-content {
  margin-top: 70px; /* 헤더 높이만큼 상단 여백 확보 */
  overflow-x: hidden;
  /* 스크롤 부드러운 감속 (iOS 관성 스크롤) */
  -webkit-overflow-scrolling: touch;
}

/* ===================== 스크롤 스냅 컨테이너 =====================
 * 이전: JS 기반 wheel 이벤트 잭킹 방식 → 현재: CSS scroll-snap 방식
 * [참고] main.js 624번 줄 주석: 스크롤 스냅 휠 잭킹 로직 완전히 제거됨
 * ================================================================= */
.scroll-snap-container {
  /* scroll-snap은 비활성화 (휠 잭킹 제거 정책) - 단순 블록 컨텍스트로 동작 */
  display: block;
  width: 100%;
}

.scroll-snap-section {
  /* 일반 섹션과 동일하게 동작 - section 기본 스타일(padding: 100px 0)이 적용됨 */
  display: block;
  width: 100%;
}

/* 솔루션 페이지 전용: tab-nav가 header 아래 추가 고정되므로 top 보정 */
/* [변경 사유] .page-content가 margin-top 방식으로 변경됨에 따라 top → margin-top으로 변경 */
.sol-page-wrapper {
  margin-top: 132px !important; /* header(70) + tab-nav(62) */
}

/* --- [Layout] --- */
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.hero > .container {
  margin-top: auto;
  margin-bottom: auto;
  padding: 100px 0 100px 100px;
}

a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}

section {
  padding: 100px 0;
  border-bottom: 1px solid var(--glass-border);
}

/* [Header] */
header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
  height: 70px;
  transition: 0.3s;
}

.nav-inner {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

/* 로고 이미지 테마 전환 */
.logo .logo-light {
  display: none !important;
}
.logo .logo-dark {
  display: block !important;
  height: 28px;
  width: auto;
}

html.light-mode .logo .logo-light {
  display: block !important;
  height: 28px;
  width: auto;
}
html.light-mode .logo .logo-dark {
  display: none !important;
}

.logo span {
  font-family: "Pretendard", sans-serif;
}

.nav-menu {
  display: flex;
  gap: 40px;
}

.nav-menu a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-sub);
}

.nav-menu a:hover {
  color: var(--text-main);
  text-shadow: 0 0 10px var(--primary);
}

.lang-switch,
.theme-switch {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-sub);
  padding: 6px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  transition: 0.3s;
}

.light-mode .lang-switch,
.light-mode .theme-switch {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-sub);
  border-color: var(--glass-border);
}

.lang-switch:hover,
.theme-switch:hover {
  border-color: var(--text-main);
  color: var(--text-main);
}

.theme-switch {
  margin-left: 8px;
}

/* [Hero Section] */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  padding-top: 60px;
}

.hero-badge {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(6, 182, 212, 0.1);
  color: #06b6d4;
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 24px;
}

.hero h1 {
  font-size: 4rem;
  line-height: 1.15;
  margin-bottom: 30px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  word-break: keep-all;
}

.hero p {
  font-size: 1.2rem;
  color: var(--text-sub);
  margin-bottom: 50px;
  line-height: 1.7;
  max-width: 650px;
  word-break: keep-all;
}

.btn-group {
  display: flex;
  gap: 16px;
}

/* ===== [통합 버튼 시스템 (Composable Button System)] =====
 * 사용법: <button class="btn primary md">텍스트</button>
 * 구조: Base(.btn) → Color(.primary / .outline / .tertiary) → Size(.xs / .sm / .md / .lg)
 * ================================================================= */

/* --- [Base] 모든 버튼의 공통 기본 스타일 --- */
.btn {
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

/* --- [Size] 크기 변형 --- */
.btn.xs {
  padding: 6px 9px;
  font-size: 0.8rem;
  gap: 6px;
}

.btn.sm {
  padding: 10px 15px;
  font-size: 0.9rem;
  gap: 8px;
}

.btn.md {
  padding: 14px 21px;
  font-size: 1rem;
  gap: 10px;
}

.btn.lg {
  padding: 18px 27px;
  font-size: 1.1rem;
  gap: 12px;
}

/* --- [Color: Primary] 주요 액션 버튼 --- */
.btn.primary {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  box-shadow: 0 4px 20px var(--primary-glow);
}

.btn.primary:hover {
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 4px 15px var(--primary-glow);
}

/* --- [Color: Outline] 외곽선 버튼 --- */
.btn.outline {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-main);
}

.btn.outline:hover {
  border-color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

/* --- [Color: Tertiary] 보조/약한 버튼 --- */
.btn.tertiary {
  background: var(--card-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-sub);
}

.btn.tertiary:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* --- [Color: Success] 성공/활성 버튼 --- */
.btn.success {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.btn.success:hover {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.5);
}
.btn.success:active {
  background: rgba(34, 197, 94, 0.4);
  transform: translateY(0);
}
.btn.success:focus {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

/* --- [Color: Warning] 경고/수정 버튼 --- */
.btn.warning {
  background: rgba(234, 179, 8, 0.12);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.2);
}
.btn.warning:hover {
  background: rgba(234, 179, 8, 0.25);
  border-color: rgba(234, 179, 8, 0.5);
}
.btn.warning:active {
  background: rgba(234, 179, 8, 0.4);
  transform: translateY(0);
}
.btn.warning:focus {
  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.2);
}

/* --- [Color: Danger] 위험/삭제/비활성 버튼 --- */
.btn.danger {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.btn.danger:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
}
.btn.danger:active {
  background: rgba(239, 68, 68, 0.4);
  transform: translateY(0);
}
.btn.danger:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* --- [Light Mode 버튼 보정] --- */
.light-mode .btn.outline {
  color: var(--text-main);
  border-color: var(--glass-border);
}

.light-mode .btn.outline:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--text-main);
}

/* --- [이전 코드] 하위 호환을 위해 주석 보존 --- */
/* .btn-primary { background: var(--primary); color: white; box-shadow: 0 4px 20px var(--primary-glow); } ((btn.primary 로 통합)) */
/* .btn-primary:hover { background: #2563eb; transform: translateY(-2px); } ((btn.primary:hover 로 통합)) */
/* .btn-outline { background: transparent; border: 1px solid var(--glass-border); color: var(--text-main); } ((btn.outline 로 통합)) */
/* .btn-outline:hover { border-color: var(--text-main); background: rgba(255, 255, 255, 0.05); } ((btn.outline:hover 로 통합)) */

/* [Marquee Section] */
.marquee-section {
  background: var(--marquee-bg);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  padding: 30px 0;
  overflow: hidden;
  transition: 0.3s;
  width: 100%;
}

/*
 * .marquee-track: 가로로 이어지는 컨테이너.
 * JS(initMarquee)가 window.load 시점에 원본 partner-item을 읽어서 제거한 뒤,
 * .marquee-set 두 개로 재구성하고 .marquee-ready 클래스를 부여합니다.
 */
.marquee-track {
  display: flex;
  width: max-content;
}

/*
 * .marquee-set: 아이템 1세트 단위. JS가 동적으로 생성.
 * padding-right: 다음 set 첫 아이템과의 간격을 일정하게 유지 (gap 역할)
 */
.marquee-set {
  display: flex;
  gap: 80px;
  flex-shrink: 0;
  padding-right: 80px; /* set 경계 gap (내부 gap 80px와 동일하게) */
}

/* JS 초기화 완료 후 .marquee-ready 클래스 추가 → 애니메이션 시작 */
.marquee-track.marquee-ready {
  animation: marquee-scroll var(--marquee-duration, 30s) linear infinite;
}

.partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  transition: 0.3s;
}

.partner-item img {
  height: 32px;
  width: auto;
  transition: 0.3s;
}

/* 
 * [다크 모드 로고 교체 (CSS content 방식)]
 * 현재 마크업(HTML)의 src 속성에는 '라이트 모드'용 이미지가 들어가 있다고 가정합니다.
 * 다크 모드용 이미지가 준비되면, 아래 주석을 해제하고 경로를 각 이미지에 맞게 수정해 주세요.
 * 이렇게 하면 html에 .light-mode 클래스가 없을 때(다크 모드일 때) 이미지가 덮어씌워집니다.
 */
/*
html:not(.light-mode) .partner-item img[src="./1.png"] { content: url('./1_dark.png'); }
html:not(.light-mode) .partner-item img[src="./2.svg"] { content: url('./2_dark.svg'); }
html:not(.light-mode) .partner-item img[src="./3.png"] { content: url('./3_dark.png'); }
html:not(.light-mode) .partner-item img[src="./4.svg"] { content: url('./4_dark.svg'); }
html:not(.light-mode) .partner-item img[src="./5.png"] { content: url('./5_dark.png'); }
html:not(.light-mode) .partner-item img[src="./wangbyul.png"] { content: url('./wangbyul_dark.png'); }
*/
/* html:not(.light-mode) .nav-inner a img[src*="wangbyul.png"] {
  content: url("../img/dark-mode/wangbyul.png");
} */

.partner-item:hover {
  opacity: 1;
  transform: scale(1.05);
}

.partner-item:hover img {
  filter: grayscale(0%);
}

.alt-text {
  color: var(--text-sub);
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
  border: 1px dashed var(--glass-border);
  padding: 10px 20px;
  border-radius: 4px;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    /*
     * --marquee-shift: JS(initMarquee)가 window.load 시점에
     * .marquee-set 1개의 실제 offsetWidth(padding-right 포함)를 px 단위로 설정.
     * 이 거리만큼 이동하면 set1 끝 → set2 시작으로 seamless 연결됨.
     */
    transform: translateX(var(--marquee-shift, -50%));
  }
}

/* [Engineering Metrics] */
.metrics-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE, Edge */
  margin-top: 60px;
  padding: 10px 0 20px 0; /* padding auto는 CSS 표준 지원 불가 */
  cursor: grab;
}

.metrics-grid:active {
  cursor: grabbing;
}

.metrics-grid::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* ========================================================
   [가로 스크롤 안전 여백 및 가운데 정렬 기법 (Safe Center)]
   justify-content: center를 사용하면 왼쪽이 잘리는 문제가 있으므로,
   양 끝 카드에 margin-auto를 부여하여 자동으로 중앙 정렬.
   ======================================================== */
.metric-card:first-child {
  margin-left: auto;
}

.metric-card:last-child {
  margin-right: auto;
}

.metric-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 40px 50px;
  text-align: center;
  transition: 0.3s;
  scroll-snap-align: start;
  -webkit-user-select: none; /* 드래그 시 텍스트 선택 방지 (Safari/Chrome 등) */
  user-select: none; /* 드래그 시 텍스트 선택 방지 */
}

.metric-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.metric-num {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 10px;
}

.metric-label {
  font-size: 0.9rem;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* [Solutions Stack] */
.section-header h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: var(--text-main);
}

.section-header p {
  color: var(--text-sub);
  margin-bottom: 50px;
  font-size: 1.1rem;
}
.section-header p[data-i18n="capa_desc"] {
  color: var(--text-sub);
  margin-bottom: 45px;
  font-size: 1.1rem;
}

/* [Solutions Slide Layout] */
.solution-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.solution-grid {
  display: flex;
  gap: 17px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* scroll-behavior: smooth; <- Disabled for JS control */
  scrollbar-width: thin;
  scrollbar-color: var(--primary) var(--glass-bg);
  cursor: grab;
  padding: 8px;
}

.solution-grid:active,
.solution-grid.active {
  cursor: grabbing;
}

.solution-grid::-webkit-scrollbar {
  height: 8px;
}

.solution-grid::-webkit-scrollbar-track {
  background: var(--glass-bg);
  border-radius: 4px;
}

.solution-grid::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 4px;
}

#solutions .sol-card {
  min-width: 100%;
  flex-direction: row !important;
  scroll-snap-align: start;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  transition: 0.3s;
  cursor: pointer;
}

#solutions .sol-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

#solutions .sol-img-area {
  width: 35%;
  min-height: 450px;
  border-right: 1px solid var(--card-border);
  flex-shrink: 0;
  background: var(--img-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

#solutions .sol-img-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sol-img-placeholder {
  color: var(--wb-text-sub, var(--text-sub));
  font-weight: 700;
}

#solutions .sol-content {
  width: 65%;
  padding: 50px 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

#solutions h3 {
  font-size: 2.2rem;
  margin-bottom: 24px;
  color: var(--text-main);
}

#solutions p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-sub);
  margin-bottom: 40px;
  word-break: keep-all;
}

/* [Solution Buttons] */
.sol-btn-group {
  display: flex;
  gap: 12px;
  margin-top: auto;
}

/* [이전 코드] .btn-sol-primary, .btn-sol-outline ((btn primary sm / btn outline sm 으로 통합)) */
/* .btn-sol-primary, .btn-sol-outline { padding: 12px 24px; ... } */
/* .btn-sol-primary { background: var(--primary); color: white; border: 1px solid var(--primary); } */
/* .btn-sol-primary:hover { background: #2563eb; transform: translateY(-2px); } */
/* .btn-sol-outline { background: transparent; color: var(--text-sub); border: 1px solid var(--text-sub); } */
/* .btn-sol-outline:hover { color: var(--text-main); border-color: var(--text-main); background: rgba(255, 255, 255, 0.05); } */

/* [Slide Navigation Buttons] */
.slide-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  /* Always white icons for visibility on image/dark bg */
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.light-mode .slide-nav-btn {
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  border-color: rgba(0, 0, 0, 0.1);
}

.slide-nav-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.slide-prev {
  left: 20px;
}

.slide-next {
  right: 20px;
}

@media (max-width: 900px) {
  h2 {
    font-size: 2rem !important;
  }

  h3 {
    font-size: 1.7rem !important;
  }
  h4 {
    font-size: 1.3rem !important;
  }
  #solutions .sol-card {
    flex-direction: column !important;
  }

  #solutions .sol-img-area {
    width: 100%;
    min-height: 250px;
    border-right: none;
    border-bottom: 1px solid var(--card-border);
  }

  #solutions .sol-content {
    width: 100%;
    padding: 30px 24px;
  }

  .slide-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  /* .sol-btn-group {
    flex-direction: column;
    width: 100%;
  } */

  .btn-sol-primary,
  .btn-sol-outline {
    width: 100%;
    justify-content: center;
  }
}

/* [Professional IT Service Slider Layout] */
.capa-slider-wrapper {
  position: relative;
  width: 100%;
}

.capa-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 20px;
  -webkit-user-select: none;
  user-select: none;
}
.capa-slider::-webkit-scrollbar {
  display: none;
}

.capa-card {
  max-width: 550px;
  flex: 0 0 100%;
  box-sizing: border-box;
  scroll-snap-align: center;
  background: var(--card-bg); /* Mockup is dark grey */
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 50px;
  display: flex;
  gap: 60px;
  transition: 0.3s;
}

@media (max-width: 900px) {
  .capa-card {
    flex-direction: column;
    padding: 30px;
  }
}

.capa-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.capa-content h3 {
  font-size: 2rem;
  color: var(--text-main);
  margin-bottom: 20px;
}

.capa-content p {
  font-size: 1.1rem;
  color: var(--text-sub);
  margin-bottom: 30px;
  line-height: 1.6;
  word-break: keep-all;
}

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

.capa-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.05rem;
  color: var(--text-sub);
  margin-bottom: 12px;
  word-break: keep-all;
}

.capa-list i {
  color: var(--text-sub);
}

.capa-image {
  flex: 1;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub);
  font-size: 1rem;
  min-height: 350px;
}
.light-mode .capa-image {
  background: rgba(0, 0, 0, 0.03);
}

.light-mode .capa-list i {
  color: var(--text-sub);
}

.capa-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  padding: 0 15px;
  gap: 15px;
}

.capa-dots {
  display: flex;
  gap: 10px;
  flex: 1;
  max-width: 200px;
}

.capa-dot {
  width: 40px;
  height: 16px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: transparent;
  cursor: pointer;
  transition: 0.3s;
}

.capa-dot.active {
  background: var(--text-sub);
  border-color: var(--text-sub);
}
.light-mode .capa-dot.active {
  background: var(--text-sub);
  border-color: var(--text-sub);
}

.capa-counter {
  width: fit-content;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-sub);
  font-weight: 600;
  letter-spacing: 2px;
  white-space: nowrap;
}

.capa-arrows {
  width: fit-content;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.capa-arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-main);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}

.capa-arrow-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-sub);
  color: var(--text-main);
}
.light-mode .capa-arrow-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--text-sub);
}

/* Links & Badges */
.sol-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: 24px;
}

.sol-link:hover {
  text-decoration: underline;
}

.status-soon {
  color: var(--accent-orange);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1px;
  margin-top: 24px;
}

/* [Core Values / Culture Grid - Desktop] */
.core-values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.value-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 40px;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
}

.value-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.value-card h3 {
  font-size: 1.5rem;
  margin-bottom: 16px;
  color: var(--text-main);
}

.value-card p {
  color: var(--text-sub);
  line-height: 1.6;
  font-size: 1.05rem;
}

/* [Core Values Stacked Carousel - Mobile] */
.values-stack-wrapper {
  display: none; /* 기본 숨김 */
}
.swipe-hint {
  display: none; /* 기본 숨김 */
}

@media (max-width: 900px) {
  .core-values-grid {
    display: none; /* 모바일에서 기존 그리드 숨김 */
  }

  .values-stack-wrapper {
    position: relative;
    width: 100%;
    max-width: 90%;
    height: 400px;
    margin: 50px auto 30px;
    display: flex; /* 모바일에서 표출 */
    justify-content: center;
    align-items: flex-end; /* cards aligned relative to bottom */
  }
}

.value-card-stacked {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: grab;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform-origin: center center; /* 중앙 기준으로 축소하여 양쪽 여백 균형, 우측 튀어나옴 보장 */
  -webkit-user-select: none;
  user-select: none;
  will-change: transform, opacity;
}

.light-mode .value-card-stacked {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.value-card-stacked:active {
  cursor: grabbing;
}

.value-icon {
  width: 64px;
  height: 64px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 24px;
}

.value-card-stacked h3 {
  font-size: 1.6rem;
  margin-bottom: 16px;
  color: var(--text-main);
  word-break: keep-all;
}

.value-card-stacked p {
  color: var(--text-sub);
  line-height: 1.6;
  font-size: 1.05rem;
  word-break: keep-all;
}

@media (max-width: 900px) {
  .swipe-hint {
    display: block; /* 모바일에서 표출 */
    text-align: center;
    color: var(--text-sub);
    font-size: 0.9rem;
    animation: pulse-horizontal 2s infinite;
    margin-top: 20px;
  }
}

@keyframes pulse-horizontal {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}

/* [Contact Form] */
.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.contact-form {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 40px;
  border-radius: 16px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  color: var(--text-sub);
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.form-input {
  width: 100%;
  padding: 14px;
  background: var(--bg-deep);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  color: var(--text-main);
  font-family: inherit;
}

.form-input:focus {
  border-color: var(--primary);
}

textarea.form-input {
  height: 120px;
  resize: none;
}

/* [Footer] */
footer {
  padding: 60px 0;
  background: #000;
  border-top: 1px solid var(--glass-border);
  font-size: 0.9rem;
  color: #64748b;
}

.light-mode footer {
  background: #f1f5f9;
  color: #64748b;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-info h4 {
  color: #fff;
  margin-bottom: 16px;
  font-size: 1.1rem;
}

.light-mode .footer-info h4 {
  color: #0f172a;
}

.info-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.info-line i {
  color: var(--primary);
  font-size: 0.9rem;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px;
}

@media (max-width: 900px) {
  .contact-wrap {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .menu-toggle {
    display: block;
  }
  .nav-menu {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: rgba(5, 5, 5, 0.95);
    backdrop-filter: blur(12px);
    flex-direction: column;
    padding: 20px 0;
    gap: 20px;
    text-align: center;
    border-bottom: 1px solid var(--glass-border);
  }
  .light-mode .nav-menu {
    background: rgba(255, 255, 255, 0.95);
  }
  .nav-menu.active {
    display: flex;
  }
}

@media (max-width: 900px) {
  .theme-switch span {
    display: none;
  }
  .lang-switch {
    font-size: 0.8rem;
    padding: 6px 10px;
  }
  .theme-switch {
    padding: 6px 10px;
  }
  .hero > .container {
    padding: 40px 24px !important;
  }
  .hero h1 {
    font-size: 2.2rem;
    margin-bottom: 20px;
    word-break: keep-all;
  }
  .hero p {
    font-size: 1rem;
    margin-bottom: 30px;
  }
  .hero-badge {
    margin-bottom: 20px;
    font-size: 0.8rem;
  }
  /* .btn-group {
    flex-direction: column;
    width: 100%;
  } */
  .btn-group .btn {
    width: 100%;
    justify-content: center;
  }
  .metrics-grid {
    margin-top: 40px;
  }
  .metric-card {
    width: 240px;
    min-height: 240px;
    padding: 30px 15px;
  }
  .metric-num {
    font-size: 1.8rem;
  }
  .section-header h2 {
    font-size: 2rem;
  }
  .scroll-snap-section.hero {
    padding-top: 50px !important;
  }
  .scroll-snap-section {
    min-height: 0 !important;
  }
}

/* --- [Solutions Detail Page Refactoring] --- */
.sol-hero-section {
  position: relative;
  padding: 100px 0 0;
  margin-top: 0;
  overflow: hidden;
  background-color: var(--img-bg); /* Use theme bg variable */
}

.sol-hero-container {
  position: relative;
  z-index: 10;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.sol-hero-image {
  position: absolute;
  left: 0;
  bottom: -80px; /* 이미지 자체의 하단 여백/페이드 아웃 부분을 아래로 숨겨서 바닥에 붙게 만듭니다 */
  width: 65%;
  max-width: 900px;
  z-index: 1;
  pointer-events: none;
  display: flex;
  justify-content: flex-start; /* 좌측 정렬로 변경 */
  align-items: flex-end;
}

.sol-hero-image img {
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
  object-fit: contain;
  object-position: bottom left; /* 좌측 하단에 딱 붙도록 수정 */
  /* 필요하다면 drop-shadow를 줄이거나 제거할 수 있습니다 (투명도 영역에 원치 않는 그림자가 생기는 걸 방지) */
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

.light-mode .sol-hero-image img {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.05));
}

.sol-hero-content {
  width: 55%;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: relative;
  z-index: 2;
  padding-bottom: 60px;
}

.sol-hero-subtitle {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
  word-break: keep-all;
}

.sol-hero-title {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 24px;
  letter-spacing: -1px;
}

.sol-hero-desc {
  font-size: 1.1rem;
  color: var(--text-sub);
  margin-bottom: 40px;
  word-break: keep-all;
}

/* [이전 코드] .btn-sol-contact ((btn primary md 로 통합)) */
/* .btn-sol-contact { padding: 14px 32px; ... } */
/* .btn-sol-contact:hover { transform: translateY(-2px); box-shadow: 0 4px 15px var(--primary-glow); } */

.sol-tab-nav {
  position: fixed; /* sticky에서 fixed로 변경 (스크롤 컨테이너 외부) */
  top: 70px; /* Header 높이 바로 아래 */
  left: 0;
  width: 100%; /* 스크롤바 너비를 무시하고 전체 너비 차지 */
  z-index: 998;
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
  padding: 15px 0;
  transition: 0.3s;
}

.light-mode .sol-tab-nav {
  background: rgba(255, 255, 255, 0.85);
}

.sol-tab-nav .container {
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.sol-tab-nav .container::-webkit-scrollbar {
  display: none;
}

.sol-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 22px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px; /* 부드러운 사각형 */
  color: var(--text-sub);
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sol-badge:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.06);
}

.sol-badge.active {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}

.light-mode .sol-badge {
  color: var(--text-sub);
}

.light-mode .sol-badge:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.05);
}

.light-mode .sol-badge.active {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
  font-weight: 700;
}

.sol-detail-section {
  padding: 100px 0;
  border-bottom: 1px solid var(--glass-border);
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.sol-detail-section.bg-alt {
  background: rgba(255, 255, 255, 0.02);
}

.light-mode .sol-detail-section.bg-alt {
  background: rgba(0, 0, 0, 0.02);
}

.sol-detail-section h3 {
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: var(--text-main);
  text-align: center;
}

.sol-detail-section p {
  font-size: 1.1rem;
  color: var(--text-sub);
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px;
  line-height: 1.7;
}

/* [Solutions Detail Product Layout (WADI, Gyuull 등)] */
.sol-product-layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.sol-product-row {
  display: flex;
  flex-direction: row;
  gap: 50px;
  align-items: center;
  justify-content: center;
}

.sol-product-image {
  width: 400px;
  box-sizing: border-box;
}

.sol-product-image img {
  width: 100%;
}

.sol-product-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Overriding .sol-detail-section alignments */
.sol-product-section h3 {
  text-align: left;
}

.sol-product-section p {
  text-align: left;
  margin: 0; /* Remove auto center margin */
  max-width: 600px; /* Let flex layout control width */
}

.sol-product-actions {
  width: 100%;
  margin-top: 50px;
}

.sol-product-actions.align-end {
  justify-content: flex-end;
}

.sol-product-actions.align-start {
  justify-content: flex-start;
}

.red-box-placeholder {
  width: 100%;
  max-width: 1000px;
  height: 450px;
  margin: 0 auto;
  border: 2px dashed #ef4444; /* Red border */
  background: rgba(239, 68, 68, 0.03); /* Red tint */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 2px;
}

@media (max-width: 900px) {
  .sol-product-row {
    flex-direction: column;
    gap: 30px;
  }
  .sol-product-image {
    width: 100%;
    max-width: 400px;
  }
  .sol-product-section p {
    text-align: center;
    margin: 0 auto;
  }
  .sol-product-section h3 {
    text-align: center;
  }
  .sol-product-content {
    align-items: center;
  }
  .sol-product-actions.align-end,
  .sol-product-actions.align-start {
    justify-content: center;
  }
}
@media (max-width: 470px) {
  h2 {
    font-size: 1.7rem !important;
  }

  h3 {
    font-size: 1.4rem !important;
  }
  h4 {
    font-size: 1rem !important;
  }
  .btn-group,
  .sol-btn-group,
  .sol-product-actions {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .contact-form {
    padding: 25px;
  }
  .contact-form > .form-group {
    margin-bottom: 10px;
  }
  .capa-card {
    padding: 20px;
  }
  .capa-content > h3 {
    margin-bottom: 15px;
  }
  .capa-arrows {
    display: none;
  }
}

@media (max-width: 900px) {
  .sol-hero-section {
    padding: 40px 0 0 0;
  }
  .sol-hero-container {
    justify-content: flex-end; /* 모바일에서도 가로 배열 유지 */
    padding-bottom: 30px;
  }
  .sol-hero-image {
    width: 70%; /* 크기만 살짝 축소 */
    min-width: 300px;
    left: -30px; /* 왼쪽으로 좀 더 빼주어 텍스트 공간 확보 */
    bottom: -50px; /* 하단 겹침 비율 조절 */
    transform: none; /* 중앙 정렬 해제 */
  }
  .sol-hero-content {
    width: 65%; /* 텍스트 너비 비율 조정 */
    align-items: flex-end; /* 바탕 화면처럼 오른쪽 끝 정렬 유지 */
    text-align: left; /* 바탕 화면처럼 내부 텍스트는 좌측 정렬 */
    padding-bottom: 0px;
  }
  .sol-hero-title {
    font-size: 2.2rem;
    margin-bottom: 16px;
  }
  .sol-hero-subtitle {
    font-size: 0.95rem;
  }
  .sol-hero-desc {
    font-size: 0.95rem;
    margin-bottom: 24px;
  }
  .btn-sol-contact {
    padding: 10px 24px;
    font-size: 0.9rem;
  }
  .red-box-placeholder {
    height: 250px;
  }
  .sol-badge {
    padding: 6px 8px;
    font-size: 0.75rem;
  }
}

/* --- [Video & Multimedia Styles] --- */
#dashboard {
  align-items: center;
}
.dashboard-video-grid {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  aspect-ratio: 28 / 9; /* 두 비디오를 합친 전체 대략적인 비율을 고정하여 출렁임 방지 */
  margin: 40px auto;
  max-width: 1200px;
}

.dashboard-video-grid .video-container {
  margin: 0;
  max-width: none;
  cursor: pointer;
  transition:
    flex 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.4s ease;
}

/* 처음 상태: 왼쪽이 크고 오른쪽이 작음 (3:2) */
.dashboard-video-grid:not(.swapped) .video-container:nth-child(1) {
  flex: 3;
}
.dashboard-video-grid:not(.swapped) .video-container:nth-child(2) {
  flex: 2;
  opacity: 0.6;
}

/* Swapped 상태: 오른쪽을 클릭하면 비율 변경 (2:3) */
.dashboard-video-grid.swapped .video-container:nth-child(1) {
  flex: 2;
  opacity: 0.6;
}
.dashboard-video-grid.swapped .video-container:nth-child(2) {
  flex: 3;
}

.dashboard-video-grid .video-container:hover {
  opacity: 1 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.video-container {
  width: 100%;
  max-width: 1000px;
  height: fit-content;
  margin: 40px auto;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: var(--img-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* [Insite Section] */
.sol-insite-area {
  padding: 80px 0;
}

.sol-insite-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px;
}

.sol-insite-title h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--text-main);
}

.sol-insite-title p {
  font-size: 1.1rem;
  color: var(--text-sub);
  margin-bottom: 0;
}

.sol-insite-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.sol-insite-grid.col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.sol-insite-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.sol-insite-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.sol-insite-icon {
  width: 90px;
  height: 90px;
  margin: 0 auto 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sol-insite-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sol-insite-content h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: var(--text-main);
}

.sol-insite-content p {
  font-size: 0.95rem;
  color: var(--text-sub);
  line-height: 1.6;
  margin-bottom: 0;
  text-align: center;
  word-break: keep-all;
}

@media (max-width: 992px) {
  .sol-insite-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sol-mobile-controls {
  display: none; /* 모바일 외에는 숨김 */
}

@media (max-width: 900px) {
  .sol-insite-grid,
  .sol-insite-grid.col-2 {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 20px;
    -webkit-user-select: none;
    user-select: none;
  }
  .sol-insite-grid::-webkit-scrollbar,
  .sol-insite-grid.col-2::-webkit-scrollbar {
    display: none;
  }
  .sol-insite-card {
    flex: 0 0 100%;
    max-width: 550px; /* 전문 IT 서비스 카드와 동일한 너비 제한 */
    scroll-snap-align: center; /* 원본과 정확히 동일한 중앙 스냅 */
    box-sizing: border-box;
  }
  .sol-mobile-controls {
    display: flex !important; /* 미디어 쿼리로 강제 활성화 */
  }
  .sol-insite-area {
    padding: 50px 20px;
  }
}

/* [Dashboard Image Rows] */
/* [Dashboard Image Rows] */
.dashboard-image-area {
  background-color: var(--img_row-bg);
  padding: 65px 100px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.dashboard-image-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; /* Flexbox로 가로 중앙 정렬 */
  gap: 100px;
  max-width: 1300px;
  width: 100%; /* 부모 컨테이너 내에서 넓이를 100%로 잡아야 justify-content가 동작함 */
  margin: 0 !important;
}

.dashboard-image-row > div {
  flex: 1;
}
.dashboard-image-row > div > p {
  word-break: keep-all;
}

.dashboard-image-row img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: block;
}

.dashboard-image-row h4 {
  font-size: 1.8rem;
  color: var(--text-main);
  margin-bottom: 20px;
}

.dashboard-image-row p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text-sub);
  margin: 0;
  text-align: start;
}
.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 대시보드 스택 모바일 뷰 초기 상태 (데스크탑 숨김) */
.dashboard-mobile-stack,
.dashboard-mobile-hint {
  display: none;
}

@media (max-width: 900px) {
  .dashboard-image-area {
    width: 100%;
    padding: 0;
  }

  /* 비디오 그리드 모바일 가로 스와이프 캐러셀 기반 레이아웃 */
  .dashboard-video-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 20px;
    aspect-ratio: auto;
  }

  /* 스크롤바 디자인 */
  .dashboard-video-grid::-webkit-scrollbar {
    height: 6px;
  }
  .dashboard-video-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
  }

  .dashboard-video-grid .video-container {
    flex: 0 0 85% !important;
    width: 85%;
    height: 250px;
    opacity: 1 !important;
    margin: 0 !important;
    scroll-snap-align: center;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
  }

  /* 비디오 비활성 영역 오버레이 (센터 포커싱 아닐 시 어둠) */
  .dashboard-video-grid .video-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    transition: background 0.4s ease;
    pointer-events: none;
    z-index: 10;
  }

  /* 중앙 포커스 부여 시 오버레이 완전 해제 */
  .dashboard-video-grid .video-container.focus-active::after {
    background: rgba(0, 0, 0, 0);
  }

  /* 데스크탑 그리드 뷰 숨김 */
  .dashboard-desktop-view {
    display: none !important;
  }

  /* 모바일 캐러셀 스택 표출 */
  .dashboard-mobile-stack {
    display: flex;
    height: 500px; /* 이미지+텍스트 여유 확보 */
    margin: 40px auto;
  }

  /* .dashboard-mobile-hint {
    display: block;
    margin-top: 20px;
  } */

  /* 카드 스택 내부 디자인 재정의 (세로 정렬) */
  .dashboard-mobile-stack .value-card-stacked {
    padding: 24px;
    justify-content: flex-start;
  }

  .dashboard-mobile-stack .dash-card-img {
    width: 100%;
    margin-bottom: 24px;
    border-radius: 12px;
    overflow: hidden;
  }

  .dashboard-mobile-stack .dash-card-img img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--glass-border);
  }

  .dashboard-mobile-stack h4 {
    font-size: 1.4rem;
    color: var(--text-main);
    margin-bottom: 12px;
  }

  .dashboard-mobile-stack p {
    font-size: 1rem;
    color: var(--text-sub);
    line-height: 1.6;
    word-break: keep-all;
  }
}

/* [Scroll Animations] */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.scroll-snap-section {
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 0;
}

/* 특수 헤더 조정: 첫 번째 섹션이 헤더에 가리지 않도록 */
.scroll-snap-section.hero {
  padding-top: 100px;
}

/* [Reveal Animations] */
.reveal {
  opacity: 0;
  transition: all 2.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* From Bottom to Top */
.reveal-up {
  transform: translateY(50px);
}

/* From Left to Right */
.reveal-left {
  transform: translateX(-50px);
}

/* From Right to Left */
.reveal-right {
  transform: translateX(50px);
}

/* Scale Up */
.reveal-scale {
  transform: scale(0.9);
}

/* Fade In Only */
.reveal-fade {
  transform: none;
}

/* 활성화 상태 */
.reveal.active {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* [Solution Section Anchor Offset] */
.sol-detail-section {
  scroll-margin-top: 140px; /* Offset for fixed header + sticky tab nav */
}

/* =========================================================
   [Board Page Styles]
   ========================================================= */

.board-section {
  padding: 150px 0 100px;
  min-height: 100vh;
}

.board-header {
  margin-bottom: 40px;
  text-align: center;
}

.board-header h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: var(--text-main);
}

.board-header p {
  color: var(--text-sub);
}

/* Board Tab Navigation */
.board-tab-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0;
}

.board-tab {
  padding: 10px 24px;
  border-radius: 8px 8px 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--text-sub);
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: 0.2s;
  background: transparent;
}

.board-tab:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.04);
}

.board-tab.active {
  color: var(--text-main);
  background: var(--card-bg);
  border-color: var(--glass-border);
  font-weight: 700;
}

.light-mode .board-tab.active {
  background: #fff;
  border-color: var(--glass-border);
}

/* Board Controls: Search & Write */
.board-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* [이전 코드] .btn-write ((btn primary sm 으로 통합)) */
/* .btn-write { background: var(--primary); color: #fff; padding: 10px 20px; border-radius: 6px; border: none; font-weight: 700; cursor: pointer; transition: 0.2s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } */
/* .btn-write:hover { opacity: 0.9; transform: translateY(-2px); } */

/* Search Box */
.search-box {
  display: flex;
  gap: 8px;
}

.search-input {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: var(--card-bg);
  color: var(--text-main);
  width: 200px;
  font-family: inherit;
}

.search-input:focus {
  border-color: var(--primary);
  outline: none;
}

.btn-search {
  padding: 10px 16px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: var(--card-bg);
  color: var(--text-sub);
  cursor: pointer;
  transition: 0.2s;
}

.btn-search:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Board Table Layout */
.board-list {
  width: 100%;
  border-top: 2px solid var(--text-main);
  border-bottom: 1px solid var(--glass-border);
}

.board-row {
  display: grid;
  grid-template-columns: 80px 1fr 120px 120px 80px;
  padding: 15px 10px;
  border-bottom: 1px solid var(--glass-border);
  align-items: center;
  color: var(--text-sub);
  font-size: 0.95rem;
}

.board-head {
  font-weight: 700;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-main);
  text-align: center;
}

.light-mode .board-head {
  background: rgba(0, 0, 0, 0.02);
}

.board-row div {
  text-align: center;
}

.board-row .cell-title {
  text-align: left;
  padding-left: 20px;
  color: var(--text-main);
  cursor: pointer;
  transition: 0.2s;
}

.board-row .cell-title a {
  color: inherit;
}

.board-row .cell-title:hover,
.board-row .cell-title a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.board-row .cell-notice {
  color: var(--primary);
  font-weight: 700;
}

/* ================= Mobile Board Layout ================= */
@media (max-width: 900px) {
  .board-head {
    display: none !important; /* 모바일에서 표 헤더 숨김 */
  }

  .board-section {
    padding: 80px 0 40px;
  }

  .board-row {
    display: flex;
    flex-wrap: wrap; /* 요소들이 영역 넘어가면 다음 줄로 배치 */
    padding: 20px 15px;
    gap: 0;
    align-items: flex-start;
  }

  /* 1. No 컬럼 숨기기 */
  .board-row > div:nth-child(1) {
    display: none;
  }

  /* 2. 제목 (가장 크게, 맨 윗줄 100% 차지) */
  .board-row .cell-title {
    width: 100%;
    text-align: left;
    padding-left: 0;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
  }

  /* 3 & 4. 작성자, 날짜 (제목 아래 작게 배치) */
  .board-row > div:nth-child(3),
  .board-row > div:nth-child(4) {
    text-align: left;
    font-size: 0.85rem;
    color: var(--text-sub);
    margin-right: 12px;
  }

  /* 5. 조회수 숨기기 (깔끔한 UI를 위해 모바일에선 생략) */
  .board-row > div:nth-child(5) {
    display: none;
  }
  .board-tab-nav {
    gap: 0px;
  }
  .board-tab {
    padding: 10px;
    flex: 1;
    text-align: center;
    white-space: nowrap;
    word-break: keep-all;
  }
  .board-controls {
    gap: 10px;
  }
  .search-box {
    width: 100%;
  }
  .search-input {
    width: 100%;
    flex: 1;
  }
}

/* Admin badge on comments */
.badge-admin {
  display: inline-block;
  padding: 2px 8px;
  background: var(--primary);
  color: #fff;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 6px;
}

/* Pagination */
.board-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}

.board-pagination a,
.board-pagination span {
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  color: var(--text-sub);
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.2s;
  text-decoration: none;
}

.board-pagination a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.board-pagination .active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Light mode attachment icon */
.light-mode .icon-attach {
  content: url("../img/svg/icon_attach-light.svg");
}

.board-pagination .active:hover {
  background: var(--primary-glow);
  color: #fff;
  border-color: var(--primary-glow);
}

/* =========================================================
   [Modal Styles]
   ========================================================= */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.modal-content {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  /* overflow-y: auto; ((modal-body로 스크롤 위임)) */
  overflow: hidden; /* 모달 자체는 넘침 차단 */
  padding: 30px;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}

/* 모달 본문 스크롤 영역 — 이 div만 스크롤됩니다 */
.modal-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* flex 자식의 overflow 동작을 위해 필수 */

  /* 스크롤바를 모달 맨 우측 가장자리로 밀어내고, 내용물 사이 여백을 강제 확보하는 공간 트릭 */
  margin-left: -30px;
  margin-right: -22px;
  padding-left: 30px;
  padding-right: 22px;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-sub);
  transition: 0.2s;
}

.modal-close:hover {
  color: var(--text-main);
}

.modal-title {
  font-size: 1.4rem;
  margin-bottom: 24px;
  color: var(--text-main);
  padding-bottom: 14px;
}

.modal-content .form-group {
  margin-bottom: 16px;
}

.modal-content .form-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-sub);
  font-size: 0.9rem;
}

.modal-content .form-control {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-deep);
  border: 1px solid var(--glass-border);
  color: var(--text-main);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s;
}

.modal-content .form-control:focus {
  border-color: var(--primary);
  outline: none;
}

.modal-content textarea.form-control {
  height: 180px;
  resize: none;
  line-height: 1.6;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
}

.btn-cancel {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-sub);
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: 0.2s;
}

.btn-cancel:hover {
  border-color: var(--text-main);
  color: var(--text-main);
}

/* =========================================================
   [Post Detail Page Styles]
   ========================================================= */

.post-wrap {
  max-width: 900px;
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
}

.post-title-area {
  padding: 30px 40px 20px;
  border-bottom: 1px solid var(--glass-border);
}

.post-title-area h2 {
  font-size: 1.8rem;
  color: var(--text-main);
  line-height: 1.4;
  word-break: keep-all;
}

.post-meta {
  display: flex;
  gap: 24px;
  padding: 16px 40px;
  border-bottom: 1px solid var(--glass-border);
  color: var(--text-sub);
  font-size: 0.9rem;
}

.post-meta > span {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-meta i {
  color: var(--primary);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  margin-top: 1px;
}

.post-attach {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 40px;
  border-bottom: 1px solid var(--glass-border);
  color: var(--text-sub);
  font-size: 0.9rem;
  background: rgba(59, 130, 246, 0.05);
}

.post-attach i {
  color: var(--primary);
}

.post-attach span {
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
}

.post-content {
  padding: 40px;
  min-height: 200px;
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

/* =========================================================
   [Comment Styles]
   ========================================================= */

.comment-wrap {
  max-width: 900px;
  margin: 30px auto 0;
}

.comment-title {
  font-size: 1.2rem;
  color: var(--text-main);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--text-main);
}

.comment-title span {
  color: var(--primary);
  margin-left: 6px;
}

.comment-list {
  margin-bottom: 30px;
}

.comment-empty {
  text-align: center;
  padding: 30px;
  color: var(--text-sub);
  font-size: 0.95rem;
  border: 1px dashed var(--glass-border);
  border-radius: 8px;
}

.comment-item {
  padding: 20px;
  border-bottom: 1px solid var(--glass-border);
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.comment-author {
  font-weight: 700;
  color: var(--text-main);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.comment-date {
  font-size: 0.85rem;
  color: var(--text-sub);
}

.comment-content {
  color: var(--text-main);
  font-size: 0.95rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 댓글 작성 폼 */
.comment-form {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 24px;
}

.comment-input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.comment-input-name {
  flex: 1;
}

.comment-input-pwd {
  flex: 1;
}

.comment-input-content {
  margin-bottom: 12px;
}

.comment-input-content textarea {
  resize: none;
}

.comment-submit-row {
  display: flex;
  justify-content: flex-end;
}

/* =========================================================
   [View Modal (wide)]
   ========================================================= */

.modal-content-wide {
  max-width: 750px;
  max-height: 90vh;
}

.modal-content-wide .post-meta {
  padding: 12px 0;
  border-bottom: transparent !important;
}

.modal-content-wide .post-content {
  padding: 0;
  min-height: 120px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--glass-border);
}

/* =========================================================
   [Attach File Link Styles]
   ========================================================= */

.post-attach {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  font-size: 0.9rem;
}

.post-attach > i {
  color: var(--primary);
  margin-top: 3px;
  flex-shrink: 0;
}

.attach-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  text-decoration: none;
  padding: 4px 0;
  transition: 0.2s;
}

.attach-link:hover {
  text-decoration: underline;
}

.attach-link i {
  font-size: 0.85rem;
}

.attach-size {
  color: var(--text-sub);
  font-size: 0.82rem;
}

/* =========================================================
   [Reply Comment Styles]
   ========================================================= */

.btn-reply {
  background: none;
  border: none;
  color: var(--text-sub);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 4px 0;
  margin-top: 6px;
  transition: 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-reply:hover {
  color: var(--primary);
}

.reply-list {
  margin-top: 8px;
  border-left: 2px solid var(--glass-border);
  padding-left: 16px;
}

.reply-item {
  padding: 12px 0;
  border-bottom: none;
}

.reply-item:last-child {
  padding-bottom: 0;
}

/* =========================================================
   [Comment Action Row]
   ========================================================= */

.comment-action-row {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.board-pagination .disabled {
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  color: var(--text-sub);
  font-size: 0.9rem;
  opacity: 0.4;
  cursor: not-allowed;
}
.post-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
}

.post-meta-row .post-actions {
  display: flex;
  gap: 8px;
  padding: 0;
  border-top: none;
}

.badge-notice {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(59, 130, 246, 0.15);
  color: var(--primary);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

.board-row-notice {
  background: rgba(59, 130, 246, 0.03);
}

/* ===================== Floating Action Button (FAB) ===================== */
.fab-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 9999;

  background-color: var(--fab-bg);
  width: fit-content;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 20px var(--primary-glow);
}

.fab-btn {
  padding: 10px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.fab-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

@media (max-width: 900px) {
  .fab-container {
    bottom: 20px;
    right: 20px;
  }
  .fab-btn {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }

  /* ================= 모바일 모달 및 폼 패딩 최적화 ================= */
  .modal-content {
    width: 95%; /* 가로 여백을 줄이고 컨텐츠 부위를 늘림 */
    max-height: 80vh;
    padding: 20px 15px; /* 심하게 컸던 패딩을 20px, 15px 단위로 대폭 축소 */
  }

  /* 스크롤 가능한 본문 영역의 우측 여백 보정 트릭도 동기화 */
  .modal-body {
    margin-left: -15px;
    margin-right: -7px;
    padding-left: 15px;
    padding-right: 7px;
  }

  .modal-title {
    font-size: 1.2rem;
    margin-bottom: 0;
    padding-bottom: 10px;
    padding-right: 24px; /* 닫기 버튼과 안 겹치도록 방어 */
  }

  .modal-close {
    top: 15px;
    right: 15px;
    font-size: 1.3rem;
  }

  /* 폼 요소 여백 축소 */
  .modal-content .form-group {
    margin-bottom: 12px;
  }

  .modal-content .form-label {
    font-size: 0.85rem;
    margin-bottom: 4px;
  }

  .modal-content .form-control {
    padding: 8px 10px;
    font-size: 0.9rem;
  }

  .modal-content textarea.form-control {
    height: 140px; /* 글쓰기 에디터 세로 길이 살짝 단축하여 스크롤 압박 해소 */
  }
  .modal-actions {
    padding-top: 0px;
  }

  /* 상세보기 모달 윗단(작성자, 날짜, 조회 등) 세로 정렬화 */
  .post-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 0;
    border-bottom: 1px solid transparent;
  }

  .post-meta {
    flex-wrap: wrap; /* 넘어가는 내용은 줄바꿈 허용 */
    gap: 12px;
    font-size: 0.85rem;
    padding: 0 !important;
  }

  .post-content {
    padding: 16px 0; /* 불필요했던 상하 40px 패딩 삭제 */
    min-height: 120px;
    font-size: 0.95rem;
  }

  /* 댓글 폼 (모바일에서는 가로 나열보다 세로 나열이 좋음) */
  .comment-input-row {
    flex-direction: column;
    gap: 8px;
  }

  .comment-form {
    padding: 16px;
  }
}

.sol-product-content.centered {
  align-items: center;
  text-align: center;
}