@charset "UTF-8";
/* === Breakpoints === */
/* ===== Design tokens ===== */
@import url("https://fonts.googleapis.com/css2?family=Pretendard:wght@100..900&display=swap&subset=latin,korean");
:root {
  --bg: #ffffffcc; /* 살짝 투명한 배경 → 유리감 */
  --ink: #0f172a; /* 메인 텍스트 */
  --muted: #475569; /* 서브 텍스트 */
  --accent: #00A5A7; /* 포인트 컬러 */
  --line: #e5e7eb; /* 구분선 */
  --buttonbg: #00A5A7; /* 포인트 컬러 */
  --radius: 14px;
  --space: 16px;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

/* 모바일 전용 */
/* 태블릿 전용 */
/* 데스크톱 전용 (선택사항) */
html, body {
  margin: 0;
  padding: 0;
  background-color: white;
  color: black;
  font-size: 11px;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  font-feature-settings: "rlig" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
}

main {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
main.hasSubMenu {
  display: flex;
  gap: calc(var(--space) * 5);
}
@media (max-width: 767px) {
  main.hasSubMenu {
    gap: 0;
  }
}
main .contentContainer {
  flex: 1;
  min-width: 0;
}
main .contentContainer > h1:first-child {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: calc(var(--space) * 1.5);
  letter-spacing: -0.02em;
}
main .contentContainer > p:first-of-type {
  font-size: 1.1rem;
  color: var(--muted);
  margin-bottom: calc(var(--space) * 4);
  line-height: 1.6;
}
main .subMenu {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  gap: calc(var(--space) * 2.5);
  flex-direction: column;
  position: sticky;
  top: calc(60px + var(--space) * 3);
  align-self: flex-start;
  height: fit-content;
  max-height: 70vh;
  overflow-y: scroll;
}
main .subMenu .title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  padding-bottom: calc(var(--space) * 1.5);
  margin-bottom: calc(var(--space) * 0.5);
  border-bottom: 2px solid #e8e8e8;
  letter-spacing: -0.02em;
}
main .subMenu nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}
main .subMenu nav a {
  display: block;
  padding: 13px 0;
  font-size: 0.95rem;
  font-weight: 400;
  color: #666;
  text-decoration: none;
  position: relative;
  transition: all 0.2s ease;
  letter-spacing: -0.01em;
  border-bottom: 1px solid #f5f5f5;
  /* 좌측 바 */
}
main .subMenu nav a::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background: var(--accent);
  transition: height 0.2s ease;
}
main .subMenu nav a:hover {
  color: var(--ink);
  padding-left: 8px;
}
main .subMenu nav a:hover::before {
  height: 16px;
}
main .subMenu nav a.active {
  color: var(--accent);
  font-weight: 600;
  padding-left: 8px;
}
main .subMenu nav a.active::before {
  height: 20px;
}
@media (min-width: 768px) and (max-width: 1024px) {
  main {
    gap: calc(var(--space) * 3);
    padding: calc(var(--space) * 3) var(--space);
  }
  main .subMenu {
    width: 170px;
  }
  main .subMenu .title {
    font-size: 1.35rem;
  }
  main .subMenu nav a {
    font-size: 0.9rem;
    padding: 12px 0;
  }
}
@media (max-width: 767px) {
  main {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  main .subMenu {
    width: 100%;
    position: static;
    gap: calc(var(--space) * 2);
    padding: calc(var(--space) * 3) var(--space) calc(var(--space) * 2);
    background: #fafafa;
    border-bottom: 1px solid #e8e8e8;
  }
  main .subMenu .title {
    font-size: 1.3rem;
    padding-bottom: calc(var(--space) * 1.2);
    margin-bottom: calc(var(--space) * 1.5);
  }
  main .subMenu nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  main .subMenu nav::-webkit-scrollbar {
    display: none;
  }
  main .subMenu nav a {
    white-space: nowrap;
    padding: 10px 18px;
    font-size: 0.9rem;
    border-radius: 20px;
    flex-shrink: 0;
    background: white;
    border: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
  }
  main .subMenu nav a::before {
    display: none;
  }
  main .subMenu nav a:hover {
    border-color: var(--accent);
    color: var(--accent);
    padding-left: 18px;
  }
  main .subMenu nav a.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    padding-left: 18px;
  }
  main .contentContainer {
    padding: calc(var(--space) * 3) var(--space);
  }
  main .contentContainer > h1:first-child {
    font-size: 2rem;
    margin-bottom: var(--space);
  }
  main .contentContainer > p:first-of-type {
    font-size: 1rem;
    margin-bottom: calc(var(--space) * 3);
  }
}
main a {
  cursor: pointer;
}

.pageContent {
  padding: 6rem 2rem;
  display: flex;
  gap: 3rem;
}
@media (max-width: 767px) {
  .pageContent {
    flex-direction: column;
    padding-top: 0;
  }
}
.pageContent .contentWrapper .header {
  text-align: center;
  margin-bottom: 4rem;
}
.pageContent .contentWrapper .title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.pageContent .contentWrapper .subTitle {
  font-size: 1.25rem;
  font-weight: 400;
  color: #666;
  line-height: 1.6;
}
.pageContent .contentWrapper .image {
  width: 12rem;
  height: 12rem;
  margin: 0 auto 3rem;
  border-radius: 50%;
  overflow: hidden;
}
.pageContent .contentWrapper .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pageContent .contentWrapper .greeting {
  text-align: center;
  margin-bottom: 3rem;
}
.pageContent .contentWrapper .greeting p {
  font-size: 1.125rem;
  font-weight: 500;
  color: #333;
}
.pageContent .contentWrapper .section {
  margin-bottom: 4rem;
}
.pageContent .contentWrapper .sectionTitle {
  font-size: 1.75rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}
.pageContent .contentWrapper .description {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 1.5rem;
}
.pageContent .contentWrapper .description strong {
  font-weight: 600;
  color: #111;
}
.pageContent .contentWrapper .quote {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
  color: #111;
  margin: 2.5rem 0;
  padding: 1.5rem 2rem;
  border-left: 4px solid #111;
  background: #f8f8f8;
  font-style: italic;
}
.pageContent .contentWrapper .list {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}
.pageContent .contentWrapper .list li {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}
.pageContent .contentWrapper .list li:hover {
  border-color: #111;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.pageContent .contentWrapper .list li strong {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 0.5rem;
}
.pageContent .contentWrapper .list li p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #666;
  margin: 0;
}
.pageContent .contentWrapper .signature {
  text-align: right;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #e0e0e0;
}
.pageContent .contentWrapper .signature p {
  font-size: 1rem;
  color: #333;
}
.pageContent .contentWrapper .signature p strong {
  font-weight: 600;
  color: #111;
}

img.square {
  aspect-ratio: 1;
  object-fit: cover;
}

.locationContainer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
  font-size: 0.875rem;
  color: #666;
}
.locationContainer a {
  color: #666;
  text-decoration: none;
  transition: color 0.2s ease;
}
.locationContainer a:hover {
  color: #111;
}
.locationContainer a:first-child {
  font-weight: 600;
  color: #111;
}
.locationContainer a:last-child {
  color: #111;
  font-weight: 500;
}
.locationContainer .separator {
  color: #ccc;
  font-size: 0.75rem;
  user-select: none;
}

@media (max-width: 767px) {
  .hideElementOnMobile {
    display: none !important;
  }
}

@media (min-width: 767px) {
  .hideElementOnPc {
    display: none !important;
  }
}

.box3 {
  border: 10px solid red !important;
}

.contentDivider3 {
  width: 100%;
  height: 3rem;
}

.contentDivider2 {
  width: 100%;
  height: 2rem;
}

.contentDivider {
  width: 100%;
  height: 1rem;
}

.fullWidth {
  width: 100vw; /* 화면 전체 너비(Viewport Width) */
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.dark {
  background-color: black;
  color: white;
}

.btn1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--space) * 0.5);
  padding: calc(var(--space) * 0.5) calc(var(--space) * 1.25);
  border-radius: var(--radius);
  background: var(--buttonbg);
  color: white;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  background-color: var(--accent) !important;
}
.btn1:hover, .btn1:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.btn1:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* 모바일에서 전체 폭으로 쓰고 싶을 때 */
@media (max-width: 767px) {
  .btn1.isBlock {
    width: 100%;
  }
}

.btn2,
a.btn2 {
  padding: 0 1rem;
  border: 1px solid rgb(197, 197, 197);
  background-color: var(--accent);
  color: white;
  border-radius: var(--radius);
}
.btn2.delete,
a.btn2.delete {
  background-color: red;
}

.buttonWrapper {
  display: flex;
  gap: var(--space);
}

coveredLink {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.pageingContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0;
}
.pageingContainer ul {
  display: flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.pageingContainer ul li a {
  display: block;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  text-align: center;
  line-height: 30px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.pageingContainer ul li a:hover {
  border-color: #222;
  color: #000;
}
.pageingContainer ul li.active a {
  background: #222;
  color: #fff;
  border-color: #222;
  cursor: default;
}
.pageingContainer ul li.disabled a {
  color: #aaa;
  border-color: #eee;
  cursor: not-allowed;
  pointer-events: none;
}

.hideElement {
  display: none !important;
}

.toastContainer {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(100%);
  min-width: 240px;
  max-width: 80%;
  padding: 12px 20px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 9999;
}
.toastContainer.showToast {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.dataGridContainer {
  /* 지역 CSS 변수 선언 (이 클래스 안에서만 유효) */
  --bg: #fff;
  --head-bg: #f6f7f9;
  --border: #e5e7eb;
  --text: #111827;
  --muted: #6b7280;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
  overflow-x: auto;
}
.dataGridContainer .dataGrid {
  width: 100%;
  border-collapse: collapse;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
.dataGridContainer .dataGrid thead {
  background: var(--head-bg);
}
.dataGridContainer .dataGrid thead th {
  text-align: left;
  font-weight: 600;
  padding: 12px 10px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.dataGridContainer .dataGrid tbody tr {
  border-bottom: 1px solid var(--border);
}
.dataGridContainer .dataGrid tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}
.dataGridContainer .dataGrid tbody td {
  padding: 12px 10px;
  vertical-align: middle;
}
.dataGridContainer .dataGrid tbody td.role {
  font-weight: 600;
}
.dataGridContainer .dataGrid tbody td.role.admin {
  color: #ef4444;
}
.dataGridContainer .dataGrid tbody td.role.manager {
  color: #2563eb;
}
.dataGridContainer .dataGrid tbody td.role.assistant {
  color: #059669;
}
.dataGridContainer .dataGrid tbody td.role.user {
  color: var(--muted);
}
.dataGridContainer .dataGridEmpty {
  padding: 24px 8px;
  color: var(--muted);
  text-align: center;
}
@media (max-width: 768px) {
  .dataGridContainer {
    padding: 8px;
  }
  .dataGridContainer .dataGrid thead {
    display: none;
  }
  .dataGridContainer .dataGrid tbody, .dataGridContainer .dataGrid tr, .dataGridContainer .dataGrid td {
    display: block;
    width: 100%;
  }
  .dataGridContainer .dataGrid tbody tr {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 10px;
    margin-bottom: 12px;
  }
  .dataGridContainer .dataGrid tbody td {
    padding: 6px 0;
    border: 0;
  }
  .dataGridContainer .dataGrid tbody td:before {
    content: attr(data-label);
    display: inline-block;
    min-width: 84px;
    margin-right: 8px;
    color: var(--muted);
  }
}

.stockIoIn {
  color: red;
  font-weight: bold;
}

.stockIoOut {
  color: blue;
  font-weight: bold;
}

.full {
  width: 100%;
}

.basic-flex {
  display: flex;
  gap: 0.5rem;
}
.basic-flex.center {
  justify-content: center;
  align-items: center;
}
.basic-flex.column {
  direction: column;
}

.center {
  text-align: center;
}

.typing-cursor {
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}
.image1 {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}
.image1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.image1:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
}

.image1.polaroid {
  padding: 0.75rem;
  background: white;
  border-radius: 0.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.06);
}
.image1.polaroid img {
  border-radius: 0.125rem;
}
.image1.polaroid::after {
  content: "";
  display: block;
  height: 2.5rem;
  background: white;
}

.image1.instagram {
  border-radius: 0.5rem;
  border: 1px solid #dbdbdb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  background: white;
}
.image1.instagram:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.formContainer {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space);
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.formContainer.filterContainer {
  max-width: 100%;
  display: flex;
  gap: var(--space);
}
.formContainer form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 1.5);
}
.formContainer {
  /* 한 섹션 = 한 줄씩 내려가는 단일 컬럼 */
}
.formContainer fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space) * 0.8);
}
.formContainer {
  /* legend는 항상 전체 너비 사용 */
}
.formContainer legend {
  display: block;
  width: 100%;
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  white-space: normal; /* 줄바꿈 허용 */
  word-break: keep-all; /* 한글 단어 단위로 줄바꿈 */
}
.formContainer {
  /* 라벨과 컨트롤: 전부 가로 100% */
}
.formContainer label {
  display: block;
  width: 100%;
  font-weight: 600;
  color: var(--muted);
}
.formContainer {
  /* 컨트롤 공통: 기본 연한 선, 포커스 진하게 */
}
.formContainer input,
.formContainer select,
.formContainer textarea {
  display: block;
  width: 100%;
  margin-top: 6px; /* 라벨과 간격 */
  padding: 1rem !important;
  border: 1px solid #eef1f5; /* 기본 더 흐리게 */
  border-radius: calc(var(--radius) - 4px);
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.formContainer input:hover,
.formContainer select:hover,
.formContainer textarea:hover {
  border-color: #e6eaf0;
  background-color: #ffffff;
}
.formContainer input:focus,
.formContainer select:focus,
.formContainer textarea:focus {
  border-color: var(--accent); /* 진하게 */
  box-shadow: 0 0 0 3px rgba(108, 0, 7, 0.16); /* 포커스 링 */
  background-color: #fff;
}
.formContainer input:disabled,
.formContainer select:disabled,
.formContainer textarea:disabled {
  background: #f8fafc;
  color: #94a3b8;
  cursor: not-allowed;
  border-color: #eef1f5;
  box-shadow: none;
}
.formContainer input::placeholder,
.formContainer select::placeholder,
.formContainer textarea::placeholder {
  color: #9aa4b2;
  opacity: 1;
}
.formContainer textarea {
  height: auto;
  min-height: 110px;
  line-height: 1.5;
  resize: vertical;
  padding-top: 12px;
  padding-bottom: 12px;
}
.formContainer input[type=number],
.formContainer input[type=date],
.formContainer input[type=tel],
.formContainer input[type=email] {
  font-variant-numeric: tabular-nums;
}
.formContainer {
  /* 파일 인풋 */
}
.formContainer input[type=file] {
  height: auto;
  padding: 8px 10px;
}
.formContainer input[type=file]::file-selector-button {
  margin-right: 10px;
  padding: 8px 12px;
  border: 1px solid #e6eaf0;
  border-radius: 8px;
  background: var(--buttonbg);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.formContainer input[type=file]::file-selector-button:hover {
  background: #e9edf2;
  border-color: #d3dae3;
}
.formContainer {
  /* 에러는 명시적으로만 */
}
.formContainer .isInvalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}
.formContainer .wasValidated input:invalid,
.formContainer .wasValidated select:invalid,
.formContainer .wasValidated textarea:invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.formContainer {
  /* 도움말 */
}
.formContainer .formHelp,
.formContainer .formValidation {
  font-size: 12px;
  color: var(--muted);
}
.formContainer {
  /* 버튼 영역: 마지막 div 한 줄 */
}
.formContainer > form > div:last-child {
  display: flex;
  gap: calc(var(--space) * 0.6);
  justify-content: flex-end;
}
.formContainer > form > div:last-child button {
  min-height: 40px;
  padding: 0 16px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid #e6eaf0;
  background: var(--buttonbg);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.formContainer > form > div:last-child button:hover {
  background: #f3f5f7;
  border-color: #d3dae3;
}
.formContainer > form > div:last-child button[type=submit] {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
.formContainer > form > div:last-child button[type=submit]:hover {
  box-shadow: 0 8px 20px rgba(108, 0, 7, 0.2);
}
.formContainer {
  /* 모바일 */
}
@media (max-width: 767px) {
  .formContainer {
    padding: 16px;
  }
  .formContainer legend {
    font-size: 15px;
  }
}

select {
  height: 44px !important;
}

/* ===== Header / Global (shape only, no animations) ===== */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: saturate(140%) blur(8px);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
header .headerInner {
  margin: 0 auto;
  padding: var(--space) var(--space);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: calc(var(--space) * 2);
}
header .logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
}
header .logo img {
  height: 28px;
  display: block;
}
header .menuBtn {
  display: none;
  justify-self: start;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 10px;
}
header .menuBtn:hover {
  background: #f6f8fa;
  color: var(--accent);
}
header .mainNav {
  display: flex;
  gap: calc(var(--space) * 2);
  align-items: center;
  justify-content: center;
}
header .mainNav > div {
  position: relative;
  display: flex;
  align-items: center;
  /* 상위 a → 서브 nav 사이 호버 브리지 (높이 늘림) */
}
header .mainNav > div::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 100%;
  height: 24px; /* 16px → 24px로 증가 */
  pointer-events: none; /* 이벤트는 통과 */
}
header .mainNav > div > a {
  display: inline-block;
  padding: 10px 6px;
  font-family: "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  /* 하단 포커스 라인 */
}
header .mainNav > div > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  width: 0%;
  margin: 0 auto;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.2s ease; /* 부드러운 전환 */
}
header .mainNav > div > a:hover {
  color: var(--accent);
}
header .mainNav > div {
  /* ===== 서브메뉴 레이어 ===== */
}
header .mainNav > div > nav {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 16px); /* 6px → 16px로 간격 증가 */
  min-width: 220px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 200;
  display: grid;
  gap: 4px;
  /* 초기 비표시 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  /* 위로 겹치는 오버랩 영역 확대 */
}
header .mainNav > div > nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20px; /* -12px → -20px로 증가 */
  height: 20px;
}
header .mainNav > div > nav > a {
  display: block;
  padding: 10px 12px;
  font-size: 0.92rem;
  color: var(--muted);
  text-decoration: none;
  border-radius: 10px;
}
header .mainNav > div > nav > a:hover {
  background: #f6f8fa;
  color: var(--ink);
}
header .mainNav > div {
  /* 열림 상태 */
}
header .mainNav > div:hover > nav, header .mainNav > div:focus-within > nav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 12px); /* 최종 위치 조정 */
}
header .mainNav > div {
  /* 활성 라인 확장 */
}
header .mainNav > div:hover > a::after, header .mainNav > div:focus-within > a::after {
  width: 100%;
}
header .shortcuts {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
header .shortcuts a {
  color: var(--muted);
  font-size: 0.92rem;
  text-decoration: none;
}
header .shortcuts a:hover {
  color: var(--ink);
}
@media (max-width: 767px) {
  header .menuBtn {
    display: inline-flex;
  }
  header .logo {
    justify-self: center;
  }
  header .mainNav {
    display: none;
  }
  header .shortcuts {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  header {
    /* 필요 시 태블릿 전용 조정 */
  }
}
@media (min-width: 767px) {
  header .menuBtn {
    display: none;
  }
}

/* ===== Drawer / Overlay (shape only; JS controls state) ===== */
.drawerPanel {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(86vw, 360px);
  background: #fff;
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateX(-100%);
  visibility: hidden;
  z-index: 6000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
}
.drawerPanel .drawerHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawerPanel .drawerHead .logo img {
  height: 26px;
}
.drawerPanel .drawerHead .closeBtn {
  font-size: 0.92rem;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 8px;
}
.drawerPanel .drawerHead .closeBtn:hover {
  background: #f6f8fa;
  color: var(--ink);
}
.drawerPanel > .shortcuts {
  padding: 6px 0 8px;
  border-bottom: 1px solid var(--line);
}
.drawerPanel > .shortcuts a {
  display: inline-block;
  padding: 8px 6px;
}
.drawerPanel > .mainNav {
  display: grid;
  gap: 6px;
  padding-top: 10px;
}
.drawerPanel > .mainNav > div {
  display: block;
}
.drawerPanel > .mainNav > div > a {
  display: block;
  padding: 12px 8px;
  border-radius: 10px;
}
.drawerPanel > .mainNav > div > a:hover {
  background: #f6f8fa;
}
.drawerPanel > .mainNav > div > a::after {
  display: none;
}
.drawerPanel > .mainNav > div > nav {
  position: static;
  transform: none;
  min-width: 0;
  padding: 4px 6px 8px;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: grid;
  gap: 2px;
}
.drawerPanel > .mainNav > div > nav > a {
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--muted);
}
.drawerPanel > .mainNav > div > nav > a:hover {
  background: #f1f5f9;
  color: var(--ink);
}

.drawerOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  z-index: 5500;
}

.siteFooter {
  background: #1a1a1a;
  color: #e5e5e5;
  border-top: 1px solid #333;
}
.siteFooter .siteFooterInner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
}
.siteFooter .footerColumn h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.siteFooter .footerColumn ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.siteFooter .footerColumn ul li {
  margin-bottom: 0.75rem;
}
.siteFooter .footerColumn ul li a {
  color: #b5b5b5;
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.6;
  transition: color 0.2s ease;
}
.siteFooter .footerColumn ul li a:hover {
  color: #667eea;
}
.siteFooter .footerBrand .footerLogo {
  display: inline-block;
  margin-bottom: 1.5rem;
}
.siteFooter .footerBrand .footerLogo img {
  height: 32px;
  width: auto;
  display: block;
  filter: invert(1) brightness(1.2);
}
.siteFooter .footerBrand .footerTagline {
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.75rem;
}
.siteFooter .footerBrand .footerDescription {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #999;
  margin: 0;
}
.siteFooter .footerLinks ul li a {
  display: block;
  position: relative;
  padding-left: 0.75rem;
}
.siteFooter .footerLinks ul li a::before {
  content: "›";
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: 700;
}
.siteFooter .footerContact .contactList li {
  display: flex;
  gap: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #b5b5b5;
  margin-bottom: 0.5rem;
}
.siteFooter .footerContact .contactList li strong {
  color: #999;
  font-weight: 600;
  min-width: 80px;
}
.siteFooter .footerContact .contactList li a {
  color: #b5b5b5;
  text-decoration: none;
}
.siteFooter .footerContact .contactList li a:hover {
  color: #667eea;
}
.siteFooter .footerContact .contactList li span {
  color: #b5b5b5;
}
.siteFooter .footerContact .businessHours {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #333;
}
.siteFooter .footerContact .businessHours strong {
  display: block;
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
}
.siteFooter .footerContact .businessHours p {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #999;
  margin: 0;
}
.siteFooter .footerAddress address {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #b5b5b5;
  margin-bottom: 1rem;
}
.siteFooter .footerAddress .mapLink {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9375rem;
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  transition: gap 0.2s ease;
}
.siteFooter .footerAddress .mapLink:hover {
  gap: 0.5rem;
}
.siteFooter .footerBottom {
  background: #111;
  border-top: 1px solid #333;
}
.siteFooter .footerBottom .footerBottomInner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}
.siteFooter .footerBottom .companyInfo {
  font-size: 0.8125rem;
  color: #666;
}
.siteFooter .footerBottom .companyInfo span {
  display: inline-block;
  margin-right: 1.5rem;
}
.siteFooter .footerBottom .companyInfo span strong {
  font-weight: 600;
  margin-right: 0.25rem;
}
.siteFooter .footerBottom .footerCopy {
  font-size: 0.8125rem;
  color: #666;
  margin: 0;
}
@media (max-width: 767px) {
  .siteFooter .siteFooterInner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 2rem 1.5rem;
  }
  .siteFooter .footerColumn {
    padding: 1.5rem 0;
    border-bottom: 1px solid #333;
  }
  .siteFooter .footerColumn:last-child {
    border-bottom: none;
  }
  .siteFooter .footerColumn h4 {
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }
  .siteFooter .footerColumn ul li {
    margin-bottom: 0.5rem;
  }
  .siteFooter .footerColumn ul li a {
    font-size: 0.875rem;
  }
  .siteFooter .footerBrand {
    order: 4;
    text-align: center;
    border-bottom: none;
    padding-top: 2rem;
  }
  .siteFooter .footerBrand .footerLogo {
    margin-bottom: 1rem;
  }
  .siteFooter .footerBrand .footerLogo img {
    height: 28px;
    margin: 0 auto;
  }
  .siteFooter .footerBrand .footerTagline {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  .siteFooter .footerBrand .footerDescription {
    font-size: 0.875rem;
    line-height: 1.6;
  }
  .siteFooter .footerLinks {
    order: 1;
  }
  .siteFooter .footerLinks ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 1rem;
  }
  .siteFooter .footerLinks ul li {
    margin-bottom: 0;
  }
  .siteFooter .footerLinks ul li a {
    font-size: 0.8125rem;
    padding-left: 0.5rem;
  }
  .siteFooter .footerLinks ul li a::before {
    font-size: 0.875rem;
  }
  .siteFooter .footerContact {
    order: 2;
  }
  .siteFooter .footerContact .contactList li {
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
  }
  .siteFooter .footerContact .contactList li strong {
    min-width: auto;
    font-size: 0.8125rem;
  }
  .siteFooter .footerContact .contactList li a, .siteFooter .footerContact .contactList li span {
    font-size: 0.875rem;
  }
  .siteFooter .footerContact .businessHours {
    margin-top: 1rem;
    padding-top: 1rem;
  }
  .siteFooter .footerContact .businessHours strong {
    font-size: 0.875rem;
  }
  .siteFooter .footerContact .businessHours p {
    font-size: 0.8125rem;
  }
  .siteFooter .footerAddress {
    order: 3;
  }
  .siteFooter .footerAddress address {
    font-size: 0.875rem;
    line-height: 1.7;
  }
  .siteFooter .footerAddress .mapLink {
    font-size: 0.875rem;
  }
  .siteFooter .footerBottom .footerBottomInner {
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
  }
  .siteFooter .footerBottom .companyInfo {
    font-size: 0.75rem;
  }
  .siteFooter .footerBottom .companyInfo span {
    display: block;
    margin: 0.25rem 0;
    text-align: center;
  }
  .siteFooter .footerBottom .footerCopy {
    font-size: 0.75rem;
    text-align: center;
  }
}

.indexMainSlide {
  aspect-ratio: 2;
}
@media (max-width: 767px) {
  .indexMainSlide {
    aspect-ratio: 0.6;
  }
}
.indexMainSlide .swiper-slide .image {
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.indexMainSlide .swiper-slide .desc {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.indexMainSlide .swiper-slide .desc .title {
  font-size: 3rem;
  font-weight: bolder;
  text-align: center;
}
.indexMainSlide .swiper-slide .desc .subTitle {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
}

/* ========== Hero ========== */
.indexHeaderContainer {
  position: relative;
  overflow: hidden;
  /* 이미지: 원본 비율 그대로, 가로 꽉차게 */
}
.indexHeaderContainer img {
  display: block;
  width: 100%;
  height: auto; /* ← 비율 유지 핵심 */
}
@media (max-width: 767px) {
  .indexHeaderContainer img {
    aspect-ratio: 0.7;
    object-fit: cover;
  }
}
.indexHeaderContainer {
  /* 살짝 어둡게: 가독성 확보용 오버레이 */
}
.indexHeaderContainer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15); /* 필요시 .2~.35 범위로 조절 */
  pointer-events: none;
}
.indexHeaderContainer .textWrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.indexHeaderContainer .textWrapper h1, .indexHeaderContainer .textWrapper h2 {
  margin: 0;
}
.indexHeaderContainer .textWrapper h1 {
  font-size: 5rem;
}
@media (max-width: 767px) {
  .indexHeaderContainer .textWrapper h1 {
    font-size: 2rem;
  }
}
.indexHeaderContainer .textWrapper h2 {
  font-size: 3rem;
}
@media (max-width: 767px) {
  .indexHeaderContainer .textWrapper h2 {
    font-size: 1.5rem;
  }
}

.indexContentContainer {
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10rem;
}
@media (max-width: 767px) {
  .indexContentContainer {
    gap: 1rem;
  }
}
.indexContentContainer > section {
  background-color: white;
}
.indexContentContainer section.sloganWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7rem;
}
@media (max-width: 767px) {
  .indexContentContainer section.sloganWrapper {
    padding: 1rem;
  }
}
.indexContentContainer section.sloganWrapper .title {
  font-size: 5rem;
  font-weight: bolder;
  text-align: center;
}
@media (max-width: 767px) {
  .indexContentContainer section.sloganWrapper .title {
    font-size: 2rem;
  }
}
.indexContentContainer section.sloganWrapper .subTitle {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}
@media (max-width: 767px) {
  .indexContentContainer section.sloganWrapper .subTitle {
    font-size: 1rem;
  }
}
.indexContentContainer section.sloganWrapper .image {
  width: 100%;
}
.indexContentContainer section.sloganWrapper .desc {
  max-width: 80%;
  font-size: 1.2rem;
  display: flex;
  gap: 5rem;
}
@media (max-width: 767px) {
  .indexContentContainer section.sloganWrapper .desc {
    flex-direction: column;
  }
}
.indexContentContainer section.sloganWrapper .desc div {
  display: flex;
  flex-direction: column;
  gap: var(--space);
}
.indexContentContainer section.sloganWrapper .desc div img {
  width: 100%;
}
.indexContentContainer section.twinImageWrapper {
  max-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 반반 배치 */
  gap: var(--space);
}
.indexContentContainer section.twinImageWrapper img {
  width: 100%;
  box-shadow: var(--shadow); /* ✅ 그림자 변수 적용 */
  border-radius: var(--radius); /* 모서리 둥글게 줄 때 함께 쓰면 자연스러움 */
}
.indexContentContainer section.singleImageWrapper {
  max-width: 100%;
  padding: 0 10rem;
}
@media (max-width: 767px) {
  .indexContentContainer section.singleImageWrapper {
    padding: 0 1rem 2rem 1rem;
  }
}
.indexContentContainer section.singleImageWrapper img {
  width: 100%;
  box-shadow: var(--shadow); /* ✅ 그림자 변수 적용 */
  border-radius: var(--radius); /* 모서리 둥글게 줄 때 함께 쓰면 자연스러움 */
}
/* === Breakpoints === */
/* ===== Design tokens ===== */
:root {
  --bg: #ffffffcc; /* 살짝 투명한 배경 → 유리감 */
  --ink: #0f172a; /* 메인 텍스트 */
  --muted: #475569; /* 서브 텍스트 */
  --accent: #00A5A7; /* 포인트 컬러 */
  --line: #e5e7eb; /* 구분선 */
  --buttonbg: #00A5A7; /* 포인트 컬러 */
  --radius: 14px;
  --space: 16px;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

/* 모바일 전용 */
/* 태블릿 전용 */
/* 데스크톱 전용 (선택사항) */
.pageContent.contact .mapContainer {
  width: 100%;
  height: 450px;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}
.pageContent.contact .mapContainer iframe {
  width: 100%;
  height: 100%;
  display: block;
}
.pageContent.contact .infoGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 2rem 0;
}
@media (max-width: 767px) {
  .pageContent.contact .infoGrid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
.pageContent.contact .infoGrid .infoItem .infoLabel {
  font-size: 0.875rem;
  font-weight: 600;
  color: #999;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pageContent.contact .infoGrid .infoItem .infoValue {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}
.pageContent.contact .infoGrid .infoItem .infoValue a {
  color: #111;
  text-decoration: none;
  transition: color 0.2s ease;
}
.pageContent.contact .infoGrid .infoItem .infoValue a:hover {
  color: var(--accent, #0066cc);
}

.brandListContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 3rem;
}
.brandListContainer .brandDetailContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.brandListContainer .brandDetailContainer .brand {
  font-size: 3rem;
  font-weight: bold;
}
.brandListContainer .brandDetailContainer .title {
  font-size: 2rem;
  font-weight: bold;
}
.brandListContainer .brandDetailContainer .keyword {
  font-size: 1.5rem;
}
.brandListContainer * {
  max-width: 100%;
}

.productListContainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.productThumbContainer {
  width: 100%;
  min-width: 0;
  gap: var(--space);
  position: relative;
}
.productThumbContainer .infoWrapper {
  padding: var(--space);
}
.productThumbContainer .swiper {
  aspect-ratio: 1;
  transform: scale(0.7);
}
.productThumbContainer .swiper .swiper-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.productDetailContainer {
  border: 10px solid green;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.productDetailContainer > * {
  flex: 1;
}
.productDetailContainer .slideWrapper {
  width: 50%;
  border: 10px solid red;
}

.productDetailDescContainer {
  border: 10px solid red;
  width: auto;
}
.productDetailDescContainer * {
  max-width: 100% !important;
}

.pageContent.productIndex .brandListContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 3rem;
  margin-top: 3rem;
}
@media (max-width: 767px) {
  .pageContent.productIndex .brandListContainer {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
.pageContent.productIndex .brandCard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: transform 0.3s ease;
}
.pageContent.productIndex .brandCard:hover {
  transform: translateY(-0.5rem);
}
.pageContent.productIndex .brandCard:hover .imageWrapper img {
  transform: scale(1.05);
}
.pageContent.productIndex .brandCard .logoLink {
  display: block;
}
.pageContent.productIndex .brandCard .logoLink .logoWrapper {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #fafafa;
  border-radius: 0.5rem;
}
.pageContent.productIndex .brandCard .logoLink .logoWrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pageContent.productIndex .brandCard .brandInfo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pageContent.productIndex .brandCard .brandInfo .brand {
  font-size: 0.875rem;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pageContent.productIndex .brandCard .brandInfo .brandTitle {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111;
  margin: 0;
  letter-spacing: -0.01em;
}
.pageContent.productIndex .brandCard .brandInfo .keyword {
  font-size: 0.9375rem;
  color: #666;
  font-weight: 500;
}
.pageContent.productIndex .brandCard .brandInfo .desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #666;
  margin-top: 0.5rem;
}
.pageContent.productIndex .brandCard .imageLink {
  display: block;
  overflow: hidden;
  border-radius: 0.5rem;
}
.pageContent.productIndex .brandCard .imageLink .imageWrapper {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f5f5f5;
}
.pageContent.productIndex .brandCard .imageLink .imageWrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.productStockListContainer {
  padding: 16px;
}
.productStockListContainer .optionTable tbody tr.active {
  background-color: #BFEAEA;
}
.productStockListContainer .optionTable tbody tr.active td {
  background-color: #BFEAEA;
}
.productStockListContainer .productStockForm {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.productStockListContainer .productItem {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}
.productStockListContainer .productItem .product {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180px;
}
.productStockListContainer .productItem .product .productImage {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.productStockListContainer .productItem .product .productImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.productStockListContainer .productItem .product .productImage .noImage {
  font-size: 12px;
  color: #999;
}
.productStockListContainer .productItem .product .productInfo {
  text-align: center;
}
.productStockListContainer .productItem .product .productInfo .productName {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.productStockListContainer .productItem .product .productInfo .productCode {
  font-size: 12px;
  color: #777;
}
.productStockListContainer .productItem .options {
  flex: 1;
  overflow-x: auto;
}
.productStockListContainer .productItem .options .optionTable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.productStockListContainer .productItem .options .optionTable thead th {
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid #ddd;
  background: #fafafa;
}
.productStockListContainer .productItem .options .optionTable thead th:nth-child(1) {
  width: 22%;
  min-width: 70px;
  text-align: left;
}
.productStockListContainer .productItem .options .optionTable thead th:nth-child(2) {
  width: 18%;
  text-align: right;
}
.productStockListContainer .productItem .options .optionTable thead th:nth-child(3) {
  width: 30%;
  text-align: center;
}
.productStockListContainer .productItem .options .optionTable thead th:nth-child(4) {
  width: 30%;
  text-align: center;
}
.productStockListContainer .productItem .options .optionTable tbody td {
  padding: 4px 8px;
  font-size: 13px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
}
.productStockListContainer .productItem .options .optionTable tbody .optionName {
  text-align: left;
  font-weight: 500;
}
.productStockListContainer .productItem .options .optionTable tbody .optionStock {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #333;
  padding-right: 12px;
}
.productStockListContainer .productItem .options .optionTable tbody .optionQtyInput {
  text-align: center;
}
.productStockListContainer .productItem .options .optionTable tbody .optionQtyInput input[type=number] {
  width: 70px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.productStockListContainer .productItem .options .optionTable tbody .optionQtyButtons {
  text-align: center;
  white-space: nowrap;
}
.productStockListContainer .productItem .options .optionTable tbody .optionQtyButtons .btnQtyMinus,
.productStockListContainer .productItem .options .optionTable tbody .optionQtyButtons .btnQtyPlus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  margin: 0 2px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #f8f8f8;
  font-size: 13px;
  cursor: pointer;
}
.productStockListContainer .productItem .options .optionTable tbody .optionQtyButtons .btnQtyMinus:hover,
.productStockListContainer .productItem .options .optionTable tbody .optionQtyButtons .btnQtyPlus:hover {
  background: #eee;
}
.productStockListContainer .productItem .options .optionTable tbody .noOptionRow {
  text-align: center;
  color: #999;
  font-size: 13px;
}
.productStockListContainer .formActions {
  margin-top: 8px;
  text-align: right;
}

/* number input 화살표 제거 (크로스브라우저) */
.productStockListContainer input[type=number] {
  -moz-appearance: textfield;
}
.productStockListContainer input[type=number]::-webkit-outer-spin-button, .productStockListContainer input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 모바일 대응: 이미지 위, 옵션 아래로 쌓이게 */
@media (max-width: 768px) {
  .productStockListContainer .productItem {
    flex-direction: column;
  }
  .productStockListContainer .productItem .product {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .productStockListContainer .productItem .product .productImage {
    margin-bottom: 0;
  }
  .productStockListContainer .productItem .product .productInfo {
    text-align: left;
  }
}
.ioHistory .ioRow {
  transition: background 0.15s ease, transform 0.1s ease;
}
.ioHistory .ioRow--parent {
  background: #f9fafb;
  font-weight: 600;
}
.ioHistory .ioRow--child {
  background: #fff;
  color: #555;
}
.ioHistory .ioRow--child td:first-child {
  padding-left: 50px;
  position: relative;
}
.ioHistory .ioRow--child td:first-child::before {
  content: "↳";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  opacity: 0.7;
}
.ioHistory .ioRow:hover {
  background: #eef6ff;
}

.daesung .dsLogo {
  width: 100px;
}
.daesung main {
  padding-top: 0;
}
.daesung main h1 {
  border-bottom: 1px dotted grey;
  color: #555555;
  font-size: 1.5rem;
}
.daesung main h1::before {
  content: "• ";
}
.daesung header .mainNav {
  background-color: var(--accent);
  border-radius: 3rem;
}
.daesung header .mainNav * {
  color: white !important;
  font-weight: bold !important;
}
.daesung img:not(.dsLogo) {
  border-radius: 0.3rem;
}
.daesung .dataGrid thead {
  border-bottom: 2px solid var(--accent);
}
.daesung .dataGrid thead * {
  font-weight: bolder !important;
  color: black !important;
}
.daesung .dataGrid tbody tr:hover td {
  background-color: #BFEAEA;
}
.daesung .functionContainer {
  padding: 1rem;
  display: flex;
  gap: 1rem;
  justify-content: center !important;
}
.daesung .loginFormContainer {
  padding: 5rem;
  gap: 1rem;
  display: flex;
  flex-direction: column;
  max-width: 200px;
  margin: 0 auto;
  border: none;
}
.daesung .pagingContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 24px 0 8px;
  font-size: 14px;
  line-height: 1;
}
.daesung .pagingContainer .pageNumber,
.daesung .pagingContainer .pageControl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #374151;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.1s ease-out;
}
.daesung .pagingContainer .pageNumber:hover:not(.disabled):not(.active),
.daesung .pagingContainer .pageControl:hover:not(.disabled):not(.active) {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  color: #111827;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.08);
}
.daesung .pagingContainer .pageNumber:focus-visible,
.daesung .pagingContainer .pageControl:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45);
}
.daesung .pagingContainer .pageNumber.disabled,
.daesung .pagingContainer .pageControl.disabled {
  opacity: 0.4;
  cursor: default;
  background-color: #f9fafb;
  box-shadow: none;
  transform: none;
}
.daesung .pagingContainer .pageNumber {
  font-weight: 400;
}
.daesung .pagingContainer .pageNumber.active {
  background-color: var(--accent);
  border-color: transparent;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(74, 61, 143, 0.25), 0 8px 15px rgba(15, 23, 42, 0.15);
  transform: translateY(-1px);
}
.daesung .pagingContainer .pageControl {
  font-size: 13px;
  padding: 0 8px;
}
.daesung .pagingContainer .pageControl.first, .daesung .pagingContainer .pageControl.last {
  font-size: 12px;
}
.daesung .pagingContainer .pagingInfo {
  margin-left: 12px;
  font-size: 13px;
  color: #6b7280;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .daesung .pagingContainer {
    font-size: 13px;
    margin: 16px 0 4px;
    gap: 4px;
  }
  .daesung .pagingContainer .pageNumber,
  .daesung .pagingContainer .pageControl {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
  }
  .daesung .pagingContainer .pagingInfo {
    display: block;
    width: 100%;
    text-align: center;
    margin: 8px 0 0;
  }
}
.daesung .reserveContainer .hideOnReserveMode {
  display: none;
}

.pageContent.faq .faqList {
  margin-top: 3rem;
}
.pageContent.faq .faqItem {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid #e0e0e0;
}
.pageContent.faq .faqItem:last-child {
  border-bottom: none;
}
.pageContent.faq .faqItem .question {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}
.pageContent.faq .faqItem .answer .description {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 1.5rem;
}
.pageContent.faq .faqItem .answer .highlight {
  background: #f8f8f8;
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}
.pageContent.faq .faqItem .answer .highlight strong {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111;
  margin-bottom: 0.75rem;
}
.pageContent.faq .faqItem .answer .highlight p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #666;
  margin-bottom: 0.75rem;
}
.pageContent.faq .faqItem .answer .simpleList {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0 0;
}
.pageContent.faq .faqItem .answer .simpleList li {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #666;
  padding-left: 1rem;
  position: relative;
}
.pageContent.faq .faqItem .answer .simpleList li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #999;
}
.pageContent.faq .faqItem .answer .simpleList li strong {
  font-weight: 600;
  color: #111;
}
.pageContent.faq .contactInfo {
  background: #f8f8f8;
  padding: 2rem;
  border-radius: 0.5rem;
  margin: 2rem 0;
}
.pageContent.faq .contactInfo strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
}
.pageContent.faq .contactInfo .simpleList {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pageContent.faq .contactInfo .simpleList li {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
}

.pageContent.inquiry .contentWrapper {
  max-width: 800px;
  margin: 0 auto;
}
.pageContent.inquiry h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 2rem;
  text-align: center;
}
@media (max-width: 767px) {
  .pageContent.inquiry h1 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
}
.pageContent.inquiry .inqProductContainer {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  background: #f8f8f8;
  border-radius: 0.75rem;
  margin-bottom: 3rem;
  border: 1px solid #e5e5e5;
}
.pageContent.inquiry .inqProductContainer .image {
  flex: 0 0 150px;
}
.pageContent.inquiry .inqProductContainer .image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 0.5rem;
}
.pageContent.inquiry .inqProductContainer .infoWrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pageContent.inquiry .inqProductContainer .infoWrapper h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.5rem;
}
.pageContent.inquiry .inqProductContainer .infoWrapper h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #667eea;
  margin: 0;
}
@media (max-width: 767px) {
  .pageContent.inquiry .inqProductContainer {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
  }
  .pageContent.inquiry .inqProductContainer .image {
    flex: none;
    width: 100%;
  }
  .pageContent.inquiry .inqProductContainer .image img {
    height: 200px;
  }
  .pageContent.inquiry .inqProductContainer .infoWrapper h2 {
    font-size: 1.125rem;
  }
  .pageContent.inquiry .inqProductContainer .infoWrapper h3 {
    font-size: 1.25rem;
  }
}
.pageContent.inquiry .formContainer {
  background: #fff;
  border-radius: 0.75rem;
  padding: 3rem;
  border: 1px solid #e5e5e5;
}
@media (max-width: 767px) {
  .pageContent.inquiry .formContainer {
    padding: 2rem 1.5rem;
  }
}
.pageContent.inquiry .formContainer form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 3rem 0;
}
.pageContent.inquiry .formContainer form fieldset:last-of-type {
  margin-bottom: 2rem;
}
.pageContent.inquiry .formContainer form fieldset legend {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #667eea;
  width: 100%;
}
@media (max-width: 767px) {
  .pageContent.inquiry .formContainer form fieldset legend {
    font-size: 1.125rem;
  }
}
.pageContent.inquiry .formContainer form fieldset label {
  display: block;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #333;
}
.pageContent.inquiry .formContainer form fieldset label input[type=text],
.pageContent.inquiry .formContainer form fieldset label input[type=tel],
.pageContent.inquiry .formContainer form fieldset label input[type=email],
.pageContent.inquiry .formContainer form fieldset label input[type=number],
.pageContent.inquiry .formContainer form fieldset label input[type=date],
.pageContent.inquiry .formContainer form fieldset label select,
.pageContent.inquiry .formContainer form fieldset label textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.2s ease;
}
.pageContent.inquiry .formContainer form fieldset label input[type=text]:focus,
.pageContent.inquiry .formContainer form fieldset label input[type=tel]:focus,
.pageContent.inquiry .formContainer form fieldset label input[type=email]:focus,
.pageContent.inquiry .formContainer form fieldset label input[type=number]:focus,
.pageContent.inquiry .formContainer form fieldset label input[type=date]:focus,
.pageContent.inquiry .formContainer form fieldset label select:focus,
.pageContent.inquiry .formContainer form fieldset label textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.pageContent.inquiry .formContainer form fieldset label input[type=text]::placeholder,
.pageContent.inquiry .formContainer form fieldset label input[type=tel]::placeholder,
.pageContent.inquiry .formContainer form fieldset label input[type=email]::placeholder,
.pageContent.inquiry .formContainer form fieldset label input[type=number]::placeholder,
.pageContent.inquiry .formContainer form fieldset label input[type=date]::placeholder,
.pageContent.inquiry .formContainer form fieldset label select::placeholder,
.pageContent.inquiry .formContainer form fieldset label textarea::placeholder {
  color: #999;
}
.pageContent.inquiry .formContainer form fieldset label textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}
.pageContent.inquiry .formContainer form fieldset label select {
  cursor: pointer;
  background: #fff;
  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 1rem center;
  padding-right: 3rem;
}
.pageContent.inquiry .formContainer form fieldset label input[type=checkbox] {
  width: auto;
  margin-top: 0;
  margin-left: 0.5rem;
  cursor: pointer;
  transform: scale(1.2);
}
.pageContent.inquiry .formContainer form fieldset label input[type=file] {
  display: block;
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.5rem;
  border: 2px dashed #ddd;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pageContent.inquiry .formContainer form fieldset label input[type=file]:hover {
  border-color: #667eea;
  background: #f5f7ff;
}
.pageContent.inquiry .formContainer form fieldset label:has(.mustinput)::after {
  content: "*";
  color: #ef4444;
  margin-left: 0.25rem;
  font-weight: 700;
}
.pageContent.inquiry .formContainer form > div {
  text-align: center;
  padding-top: 1rem;
}
.pageContent.inquiry .formContainer form > div button[type=submit] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  padding: 1rem 3rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.pageContent.inquiry .formContainer form > div button[type=submit]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.pageContent.inquiry .formContainer form > div button[type=submit]:active {
  transform: translateY(0);
}
@media (max-width: 767px) {
  .pageContent.inquiry .formContainer form > div button[type=submit] {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1rem;
  }
}
.pageContent.inquiry .formNotice {
  background: #fffbf0;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #ffe4a3;
  margin-bottom: 2rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #666;
}
.pageContent.inquiry .formNotice strong {
  color: #111;
  font-weight: 600;
}
@media (max-width: 767px) {
  .pageContent.inquiry .formNotice {
    font-size: 0.875rem;
    padding: 1rem;
  }
}

.pageContent.solution .heroImage {
  width: 100%;
  max-width: 100%;
  margin: 3rem 0;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.pageContent.solution .heroImage img {
  width: 100%;
  height: auto;
  display: block;
}
.pageContent.solution .featureImageGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin: 2rem 0;
}
@media (max-width: 767px) {
  .pageContent.solution .featureImageGrid {
    grid-template-columns: 1fr;
  }
}
.pageContent.solution .featureImageGrid .featureImage {
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.pageContent.solution .featureImageGrid .featureImage img {
  width: 100%;
  height: auto;
  display: block;
}
.pageContent.solution .caseStudyImage {
  width: 100%;
  margin: 2rem 0;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.pageContent.solution .caseStudyImage img {
  width: 100%;
  height: auto;
  display: block;
}
.pageContent.solution .processImage {
  width: 100%;
  margin: 2rem 0;
}
.pageContent.solution .processImage img {
  width: 100%;
  height: auto;
  display: block;
}

.pageContent.branding .heroSection {
  display: flex;
  gap: 4rem;
  margin: 4rem 0;
  align-items: center;
}
.pageContent.branding .heroSection .heroText {
  flex: 1;
}
.pageContent.branding .heroSection .heroText h3 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 2rem 0 1rem;
  color: #111;
}
.pageContent.branding .heroSection .heroText p {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: #555;
}
.pageContent.branding .heroSection .heroImage {
  flex: 0 0 500px;
}
.pageContent.branding .heroSection .heroImage img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  border-radius: 0.5rem;
}
@media (max-width: 767px) {
  .pageContent.branding .heroSection {
    flex-direction: column;
    gap: 2rem;
    margin: 2rem 0;
  }
  .pageContent.branding .heroSection .heroText h3 {
    font-size: 1.5rem;
  }
  .pageContent.branding .heroSection .heroText p {
    font-size: 1rem;
  }
  .pageContent.branding .heroSection .heroImage {
    flex: none;
    width: 100%;
  }
  .pageContent.branding .heroSection .heroImage img {
    height: 400px;
  }
}
.pageContent.branding .productGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}
.pageContent.branding .productGrid .productItem {
  padding: 2rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
}
.pageContent.branding .productGrid .productItem strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #111;
}
.pageContent.branding .productGrid .productItem p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #666;
}
@media (max-width: 767px) {
  .pageContent.branding .productGrid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .pageContent.branding .productGrid .productItem {
    padding: 1.5rem;
  }
}
.pageContent.branding .fullImage {
  margin: 4rem 0;
}
.pageContent.branding .fullImage img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 0.5rem;
}
@media (max-width: 767px) {
  .pageContent.branding .fullImage {
    margin: 3rem 0;
  }
  .pageContent.branding .fullImage img {
    height: 300px;
  }
}
.pageContent.branding .contactBox {
  padding: 2rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
  margin: 2rem 0;
}
.pageContent.branding .contactBox strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
}
.pageContent.branding .contactBox ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pageContent.branding .contactBox ul li {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
}
@media (max-width: 767px) {
  .pageContent.branding .contactBox {
    padding: 1.5rem;
  }
  .pageContent.branding .contactBox strong {
    font-size: 1.125rem;
  }
  .pageContent.branding .contactBox ul li {
    font-size: 0.9375rem;
  }
}

.pageContent.process .processOverview {
  margin: 3rem 0;
}
.pageContent.process .processOverview .overviewImage {
  width: 100%;
  border-radius: 0.5rem;
  overflow: hidden;
}
.pageContent.process .processOverview .overviewImage img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
@media (max-width: 767px) {
  .pageContent.process .processOverview {
    margin: 2rem 0;
  }
  .pageContent.process .processOverview .overviewImage img {
    height: 250px;
  }
}
.pageContent.process .stepItem {
  margin-bottom: 4rem;
}
.pageContent.process .stepItem.highlight {
  background: #f5f7ff;
  padding: 2rem;
  border-radius: 0.75rem;
  border: 2px solid #667eea;
}
.pageContent.process .stepItem .stepHeader {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}
.pageContent.process .stepItem .stepHeader .stepNumber {
  flex: 0 0 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
}
.pageContent.process .stepItem .stepHeader .stepTitle {
  flex: 1;
}
.pageContent.process .stepItem .stepHeader .stepTitle h3 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.5rem;
}
.pageContent.process .stepItem .stepHeader .stepTitle p {
  font-size: 1.0625rem;
  color: #666;
  line-height: 1.6;
}
.pageContent.process .stepItem .stepContent {
  padding-left: 100px;
}
.pageContent.process .stepItem .stepContent .stepInfo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: #fff;
  border-radius: 0.5rem;
  border: 1px solid #e5e5e5;
}
.pageContent.process .stepItem .stepContent .stepInfo .infoItem strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pageContent.process .stepItem .stepContent .stepInfo .infoItem p {
  font-size: 0.9375rem;
  color: #333;
  line-height: 1.6;
}
.pageContent.process .stepItem .stepContent .stepDescription p {
  font-size: 1rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 1rem;
}
.pageContent.process .stepItem .stepContent .stepDescription p.emphasis {
  font-size: 1.125rem;
  font-weight: 600;
  color: #667eea;
  padding: 1rem;
  background: #fff;
  border-radius: 0.5rem;
  border-left: 4px solid #667eea;
}
.pageContent.process .stepItem .stepContent .stepDescription p.warranty {
  font-weight: 600;
  color: #667eea;
  background: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
  text-align: center;
}
.pageContent.process .stepItem .paymentGuide {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #fff;
  border-radius: 0.5rem;
  border-left: 4px solid #667eea;
}
.pageContent.process .stepItem .paymentGuide h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
}
.pageContent.process .stepItem .paymentGuide ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pageContent.process .stepItem .paymentGuide ul li {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #555;
  padding-left: 1.5rem;
  position: relative;
}
.pageContent.process .stepItem .paymentGuide ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: 700;
}
.pageContent.process .stepItem .qualityControl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.pageContent.process .stepItem .qualityControl .qcItem {
  padding: 1.5rem;
  background: #fff;
  border-radius: 0.5rem;
  border: 1px solid #e5e5e5;
  text-align: center;
}
.pageContent.process .stepItem .qualityControl .qcItem strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.75rem;
}
.pageContent.process .stepItem .qualityControl .qcItem p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #666;
}
@media (max-width: 767px) {
  .pageContent.process .stepItem {
    margin-bottom: 3rem;
  }
  .pageContent.process .stepItem.highlight {
    padding: 1.5rem;
  }
  .pageContent.process .stepItem .stepHeader {
    gap: 1rem;
  }
  .pageContent.process .stepItem .stepHeader .stepNumber {
    flex: 0 0 60px;
    height: 60px;
    font-size: 1.5rem;
  }
  .pageContent.process .stepItem .stepHeader .stepTitle h3 {
    font-size: 1.375rem;
  }
  .pageContent.process .stepItem .stepHeader .stepTitle p {
    font-size: 0.9375rem;
  }
  .pageContent.process .stepItem .stepContent {
    padding-left: 0;
  }
  .pageContent.process .stepItem .stepContent .stepInfo {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
  }
  .pageContent.process .stepItem .qualityControl {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
.pageContent.process .processImage {
  margin: 4rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
}
.pageContent.process .processImage img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
@media (max-width: 767px) {
  .pageContent.process .processImage {
    margin: 3rem 0;
  }
  .pageContent.process .processImage img {
    height: 250px;
  }
}
.pageContent.process .timeline .timelineGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 2rem 0;
}
.pageContent.process .timeline .timelineGrid .timelineItem {
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 0.5rem;
  text-align: center;
  color: #fff;
}
.pageContent.process .timeline .timelineGrid .timelineItem strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.pageContent.process .timeline .timelineGrid .timelineItem p {
  font-size: 1.5rem;
  font-weight: 700;
}
@media (max-width: 767px) {
  .pageContent.process .timeline .timelineGrid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .pageContent.process .timeline .timelineGrid .timelineItem {
    padding: 1.5rem;
  }
}
.pageContent.process .contactBox {
  padding: 2rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
  margin: 2rem 0;
}
.pageContent.process .contactBox strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
}
.pageContent.process .contactBox ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pageContent.process .contactBox ul li {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
}
@media (max-width: 767px) {
  .pageContent.process .contactBox {
    padding: 1.5rem;
  }
  .pageContent.process .contactBox strong {
    font-size: 1.125rem;
  }
  .pageContent.process .contactBox ul li {
    font-size: 0.9375rem;
  }
}

.pageContent.faq .faqItem {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 2px solid #f0f0f0;
}
.pageContent.faq .faqItem:last-child {
  border-bottom: none;
}
.pageContent.faq .faqItem .faqQuestion {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}
.pageContent.faq .faqItem .faqQuestion .qNumber {
  flex: 0 0 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}
.pageContent.faq .faqItem .faqQuestion h3 {
  flex: 1;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
  padding-top: 0.75rem;
}
.pageContent.faq .faqItem .faqAnswer {
  padding-left: 75px;
}
.pageContent.faq .faqItem .faqAnswer .intro {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1.5rem;
}
.pageContent.faq .faqItem .faqAnswer p {
  font-size: 1rem;
  line-height: 1.8;
  color: #555;
  margin-bottom: 1rem;
}
.pageContent.faq .faqItem .faqAnswer .notice {
  font-weight: 600;
  color: #667eea;
  background: #f5f7ff;
  padding: 1rem;
  border-radius: 0.5rem;
  border-left: 4px solid #667eea;
  margin-top: 1.5rem;
}
.pageContent.faq .faqItem .faqAnswer .productList {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}
.pageContent.faq .faqItem .faqAnswer .productList li {
  padding: 0.75rem 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  border-bottom: 1px solid #f0f0f0;
}
.pageContent.faq .faqItem .faqAnswer .productList li:last-child {
  border-bottom: none;
}
.pageContent.faq .faqItem .faqAnswer .productList li strong {
  color: #111;
  font-weight: 700;
}
.pageContent.faq .faqItem .faqAnswer .timelineBox {
  background: #f8f8f8;
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
}
.pageContent.faq .faqItem .faqAnswer .timelineBox.urgent {
  background: #fff5f5;
  border: 1px solid #ffd4d4;
}
.pageContent.faq .faqItem .faqAnswer .timelineBox h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
}
.pageContent.faq .faqItem .faqAnswer .timelineBox ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pageContent.faq .faqItem .faqAnswer .timelineBox ul li {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #555;
  padding-left: 1rem;
  position: relative;
}
.pageContent.faq .faqItem .faqAnswer .timelineBox ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: 700;
}
.pageContent.faq .faqItem .faqAnswer .timelineBox ul li strong {
  color: #667eea;
  font-weight: 700;
}
.pageContent.faq .faqItem .faqAnswer .sampleOptions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.pageContent.faq .faqItem .faqAnswer .sampleOptions .sampleOption {
  padding: 1.5rem;
  background: #f8f8f8;
  border-radius: 0.5rem;
  border: 1px solid #e5e5e5;
}
.pageContent.faq .faqItem .faqAnswer .sampleOptions .sampleOption.highlight {
  background: #f5f7ff;
  border: 2px solid #667eea;
}
.pageContent.faq .faqItem .faqAnswer .sampleOptions .sampleOption h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
}
.pageContent.faq .faqItem .faqAnswer .sampleOptions .sampleOption ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pageContent.faq .faqItem .faqAnswer .sampleOptions .sampleOption ul li {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #666;
  padding: 0.25rem 0;
}
.pageContent.faq .faqItem .faqAnswer .infoBox {
  background: #fffbf0;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #ffe4a3;
  margin: 1.5rem 0;
}
.pageContent.faq .faqItem .faqAnswer .infoBox strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.75rem;
}
.pageContent.faq .faqItem .faqAnswer .infoBox ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pageContent.faq .faqItem .faqAnswer .infoBox ul li {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #555;
  padding: 0.25rem 0;
  padding-left: 1rem;
  position: relative;
}
.pageContent.faq .faqItem .faqAnswer .infoBox ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: 700;
}
.pageContent.faq .faqItem .faqAnswer .qualityProcess {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.pageContent.faq .faqItem .faqAnswer .qualityProcess .processStep {
  padding: 1.5rem;
  background: #f8f8f8;
  border-radius: 0.5rem;
  border: 1px solid #e5e5e5;
}
.pageContent.faq .faqItem .faqAnswer .qualityProcess .processStep strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #667eea;
  margin-bottom: 0.75rem;
}
.pageContent.faq .faqItem .faqAnswer .qualityProcess .processStep p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #666;
  margin: 0.25rem 0;
}
.pageContent.faq .faqItem .faqAnswer .warrantyBox {
  background: #f0fff4;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #bbf7d0;
  margin: 1.5rem 0;
}
.pageContent.faq .faqItem .faqAnswer .warrantyBox h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
}
.pageContent.faq .faqItem .faqAnswer .warrantyBox ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pageContent.faq .faqItem .faqAnswer .warrantyBox ul li {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #555;
  padding-left: 1.5rem;
  position: relative;
}
.pageContent.faq .faqItem .faqAnswer .warrantyBox ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #22c55e;
  font-weight: 700;
}
.pageContent.faq .faqItem .faqAnswer .designServices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.pageContent.faq .faqItem .faqAnswer .designServices .designType {
  padding: 1.5rem;
  background: #f8f8f8;
  border-radius: 0.5rem;
}
.pageContent.faq .faqItem .faqAnswer .designServices .designType h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
}
.pageContent.faq .faqItem .faqAnswer .designServices .designType ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pageContent.faq .faqItem .faqAnswer .designServices .designType ul li {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #666;
  padding: 0.25rem 0;
  padding-left: 1rem;
  position: relative;
}
.pageContent.faq .faqItem .faqAnswer .designServices .designType ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: 700;
}
.pageContent.faq .faqItem .faqAnswer .quoteMethod {
  background: #f8f8f8;
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}
.pageContent.faq .faqItem .faqAnswer .quoteMethod h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
}
.pageContent.faq .faqItem .faqAnswer .quoteMethod ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pageContent.faq .faqItem .faqAnswer .quoteMethod ul li {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #555;
  padding-left: 1.5rem;
  position: relative;
}
.pageContent.faq .faqItem .faqAnswer .quoteMethod ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: 700;
}
.pageContent.faq .faqItem .faqAnswer .priceTable {
  background: #f5f7ff;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid #667eea;
  margin: 1.5rem 0;
}
.pageContent.faq .faqItem .faqAnswer .priceTable h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.75rem;
}
.pageContent.faq .faqItem .faqAnswer .priceTable p {
  margin: 0.5rem 0;
}
.pageContent.faq .faqItem .faqAnswer .priceTable p.note {
  font-size: 0.875rem;
  color: #666;
  margin-top: 1rem;
}
.pageContent.faq .faqItem .faqAnswer .priceTable ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.pageContent.faq .faqItem .faqAnswer .priceTable ul li {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #555;
  padding-left: 1.5rem;
  position: relative;
}
.pageContent.faq .faqItem .faqAnswer .priceTable ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: 700;
}
.pageContent.faq .faqItem .faqAnswer .priceDetails {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.pageContent.faq .faqItem .faqAnswer .priceDetails .priceDetail {
  padding: 1.5rem;
  border-radius: 0.5rem;
}
.pageContent.faq .faqItem .faqAnswer .priceDetails .priceDetail.included {
  background: #f0fff4;
  border: 1px solid #bbf7d0;
}
.pageContent.faq .faqItem .faqAnswer .priceDetails .priceDetail.additional {
  background: #fff5f5;
  border: 1px solid #ffd4d4;
}
.pageContent.faq .faqItem .faqAnswer .priceDetails .priceDetail h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
}
.pageContent.faq .faqItem .faqAnswer .priceDetails .priceDetail ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pageContent.faq .faqItem .faqAnswer .priceDetails .priceDetail ul li {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #666;
  padding: 0.25rem 0;
  padding-left: 1rem;
  position: relative;
}
.pageContent.faq .faqItem .faqAnswer .priceDetails .priceDetail ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  font-weight: 700;
}
.pageContent.faq .faqItem .faqAnswer .priceDetails .priceDetail.included ul li::before {
  color: #22c55e;
}
.pageContent.faq .faqItem .faqAnswer .priceDetails .priceDetail.additional ul li::before {
  color: #ef4444;
}
.pageContent.faq .faqItem .faqAnswer .trackRecord {
  margin: 1.5rem 0;
}
.pageContent.faq .faqItem .faqAnswer .trackRecord .recordCategory {
  margin-bottom: 2rem;
}
.pageContent.faq .faqItem .faqAnswer .trackRecord .recordCategory:last-child {
  margin-bottom: 0;
}
.pageContent.faq .faqItem .faqAnswer .trackRecord .recordCategory h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #667eea;
}
.pageContent.faq .faqItem .faqAnswer .trackRecord .recordCategory .recordItem {
  padding: 1rem;
  background: #f8f8f8;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
}
.pageContent.faq .faqItem .faqAnswer .trackRecord .recordCategory .recordItem strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.5rem;
}
.pageContent.faq .faqItem .faqAnswer .trackRecord .recordCategory .recordItem p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #666;
  margin: 0.25rem 0;
}
.pageContent.faq .faqItem .faqAnswer .trackRecord .recordCategory .recordItem p.highlight {
  color: #667eea;
  font-weight: 600;
  margin-top: 0.5rem;
}
.pageContent.faq .faqItem .faqAnswer .strengthBox {
  background: #f5f7ff;
  padding: 1.5rem;
  border-radius: 0.5rem;
  border: 2px solid #667eea;
  margin: 1.5rem 0;
}
.pageContent.faq .faqItem .faqAnswer .strengthBox h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
}
.pageContent.faq .faqItem .faqAnswer .strengthBox ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pageContent.faq .faqItem .faqAnswer .strengthBox ul li {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: #555;
  padding-left: 1.5rem;
  position: relative;
}
.pageContent.faq .faqItem .faqAnswer .strengthBox ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: 700;
}
.pageContent.faq .faqItem .faqAnswer .deliveryInfo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.pageContent.faq .faqItem .faqAnswer .deliveryInfo .deliveryMethod {
  padding: 1.5rem;
  background: #f8f8f8;
  border-radius: 0.5rem;
}
.pageContent.faq .faqItem .faqAnswer .deliveryInfo .deliveryMethod h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
}
.pageContent.faq .faqItem .faqAnswer .deliveryInfo .deliveryMethod ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pageContent.faq .faqItem .faqAnswer .deliveryInfo .deliveryMethod ul li {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #666;
  padding: 0.25rem 0;
}
.pageContent.faq .faqItem .faqAnswer .cancelPolicy {
  margin: 1.5rem 0;
}
.pageContent.faq .faqItem .faqAnswer .cancelPolicy .policyStep {
  padding: 1.5rem;
  background: #f8f8f8;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
.pageContent.faq .faqItem .faqAnswer .cancelPolicy .policyStep:last-child {
  background: #fff5f5;
  border: 1px solid #ffd4d4;
}
.pageContent.faq .faqItem .faqAnswer .cancelPolicy .policyStep h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
}
.pageContent.faq .faqItem .faqAnswer .cancelPolicy .policyStep ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pageContent.faq .faqItem .faqAnswer .cancelPolicy .policyStep ul li {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #666;
  padding: 0.25rem 0;
  padding-left: 1rem;
  position: relative;
}
.pageContent.faq .faqItem .faqAnswer .cancelPolicy .policyStep ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #667eea;
  font-weight: 700;
}
@media (max-width: 767px) {
  .pageContent.faq .faqItem {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
  }
  .pageContent.faq .faqItem .faqQuestion {
    gap: 1rem;
  }
  .pageContent.faq .faqItem .faqQuestion .qNumber {
    flex: 0 0 50px;
    height: 50px;
    font-size: 1.125rem;
  }
  .pageContent.faq .faqItem .faqQuestion h3 {
    font-size: 1.25rem;
    padding-top: 0.5rem;
  }
  .pageContent.faq .faqItem .faqAnswer {
    padding-left: 0;
  }
  .pageContent.faq .faqItem .faqAnswer .sampleOptions,
  .pageContent.faq .faqItem .faqAnswer .qualityProcess,
  .pageContent.faq .faqItem .faqAnswer .designServices,
  .pageContent.faq .faqItem .faqAnswer .priceDetails,
  .pageContent.faq .faqItem .faqAnswer .deliveryInfo {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
.pageContent.faq .finalContact {
  text-align: center;
  padding: 3rem 0;
}
.pageContent.faq .finalContact h3 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
}
.pageContent.faq .finalContact p {
  font-size: 1.0625rem;
  color: #666;
  margin-bottom: 2rem;
}
.pageContent.faq .finalContact .contactBox {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
}
.pageContent.faq .finalContact .contactBox strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
}
.pageContent.faq .finalContact .contactBox ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pageContent.faq .finalContact .contactBox ul li {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
}
@media (max-width: 767px) {
  .pageContent.faq .finalContact h3 {
    font-size: 1.375rem;
  }
  .pageContent.faq .finalContact .contactBox {
    padding: 1.5rem;
  }
  .pageContent.faq .finalContact .contactBox strong {
    font-size: 1.125rem;
  }
  .pageContent.faq .finalContact .contactBox ul li {
    font-size: 0.9375rem;
  }
}

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