.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* Typography — fluid with clamp() */
.heading-xl {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.heading-lg {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.heading-md {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.heading-sm {
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.text-muted {
  color: var(--color-text-muted);
}

/* =============================================
   Button system — 모든 버튼은 동일한 base 위에서 variant 만 차이
   ============================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;  /* 모든 variant 가 동일한 박스 사이즈 */
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  border-radius: 0;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 2px;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary — 채워진 검정 */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Outline — 테두리만 */
.btn-outline {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-outline:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

/* Ghost — 텍스트만, 밑줄로 강조 */
.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
  padding: 10px 16px;
}

.btn-ghost:hover {
  color: var(--color-text);
}

/* Size variants */
.btn-sm { padding: 10px 22px; font-size: 0.72rem; }
.btn-lg { padding: 18px 40px; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* Divider */
.divider {
  width: 40px;
  height: 1px;
  background: var(--color-border);
  margin: 20px 0;
}

/* Page wrapper */
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  flex: 1;
  padding-top: var(--gnb-height);
}

.page-content.page-home {
  padding-top: 0;
}

/* Blank page */
.blank-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}

.blank-page h1 {
  margin-bottom: 16px;
}

.blank-page p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Form elements */
.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  font-weight: 500;
}

.form-input {
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  transition: var(--transition);
  font-size: 0.95rem;
}

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

.form-input::placeholder {
  color: var(--color-text-dim);
}

textarea.form-input {
  resize: vertical;
  min-height: 80px;
  border: 1px solid var(--color-border);
  padding: 14px 16px;
  margin-top: 4px;
}

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

/* =============================================
   Page Hero (about/contact 등 일반 페이지)
   ============================================= */
.page-hero {
  padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 5vw, 60px);
  text-align: center;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-light);
}

.page-hero-eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 18px;
}

.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 24px;
}

.page-hero-divider {
  width: 40px;
  height: 1px;
  background: var(--color-accent);
  margin: 0 auto 24px;
}

.page-hero-lead {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
}

/* Generic page section */
.page-section {
  padding: clamp(60px, 8vw, 120px) 0;
}

.page-section-narrow .container {
  max-width: 880px;
}

/* =============================================
   Placeholder card (about / contact-cta)
   ============================================= */
.placeholder-card,
.contact-cta {
  text-align: center;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 48px);
  border: 1px solid var(--color-border);
  background: var(--color-white);
}

.contact-cta {
  margin-top: 60px;
}

.placeholder-eyebrow {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent-gold);
  margin-bottom: 18px;
}

.placeholder-heading {
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 24px;
  color: var(--color-text);
}

.placeholder-desc {
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--color-text-secondary);
}

/* =============================================
   Contact grid
   ============================================= */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.contact-card {
  padding: 36px 28px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  text-align: center;
  transition: var(--transition);
}

.contact-card:hover {
  border-color: var(--color-accent);
}

.contact-eyebrow {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.contact-value {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  color: var(--color-text);
  line-height: 1.5;
}

.contact-value a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}

.contact-value a:hover {
  border-bottom-color: var(--color-accent);
}

.contact-note {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =============================================
   Shop pages — wrap & breadcrumb
   ============================================= */
.shop-page {
  padding-top: var(--gnb-height);
}

.shop-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 80px) clamp(20px, 4vw, 48px);
}

/* 영카트 표준 #sct, #sit 컨테이너 — 우리 OVELI 디자인 컨테이너로 통일 */
#sct, #sit {
  font-family: var(--font-body);
}

#sct_sortlst {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

#sct_hhtml,
#sct_thtml {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
}

/* 그누보드 페이지네이션 — OVELI 스타일로 톤 다운 */
.pg_wrap {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 60px 0 20px;
}

.pg_page,
.pg_current {
  padding: 8px 14px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  transition: var(--transition);
}

.pg_page:hover {
  color: var(--color-text);
  border-color: var(--color-border);
}

.pg_current {
  color: var(--color-text);
  border-color: var(--color-accent);
}

/* =============================================
   Shop list grid (list.10.skin.php)
   ============================================= */
.imm-shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.imm-shop-grid-3 { grid-template-columns: repeat(3, 1fr); }
.imm-shop-grid-2 { grid-template-columns: repeat(2, 1fr); }
.imm-shop-grid-5 { grid-template-columns: repeat(5, 1fr); }

.imm-product-card {
  position: relative;
  transition: transform 0.3s ease;
}

.imm-product-card:hover {
  transform: translateY(-4px);
}

.imm-product-link {
  display: block;
  color: inherit;
}

.imm-product-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--color-surface);
}

.imm-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.imm-product-card:hover .imm-product-image img {
  transform: scale(1.04);
}

.imm-product-soldout {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
}

.imm-product-card.is-soldout .imm-product-image img {
  opacity: 0.5;
}

.imm-product-info {
  padding: 0 4px;
}

.imm-product-name {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

.imm-product-spec {
  font-size: 0.74rem;
  color: var(--color-text-muted);
  margin-bottom: 12px;
  letter-spacing: 0.06em;
  line-height: 1.5;
}

.imm-product-price {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  letter-spacing: 0.03em;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.imm-price-from {
  font-family: var(--font-accent);
  font-size: 0.7rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.imm-price-strike {
  font-size: 0.74rem;
  text-decoration: line-through;
  color: var(--color-text-dim);
  margin-left: 4px;
}

.imm-product-cart {
  margin-top: 14px;
  padding: 10px 14px;
  width: 100%;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  transition: var(--transition);
  font-weight: 500;
}

.imm-product-cart:hover {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.imm-shop-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* ============================================================
   영카트 shop.list.action.js — 카트 옵션 팝업 컨테이너
   옵션 없는 상품: data 주입만 되고 즉시 form submit, 시각적 표시 없음
   옵션 있는 상품: .sct_cartop 클래스 추가되며 옵션 select 박스 보임
   ============================================================ */
.sct_li .cart-layer {
  display: none;
}

.sct_li .cart-layer.sct_cartop {
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.97);
  z-index: 5;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--color-accent);
}

.sct_li.overlay {
  position: relative;
}

.sct_cartop_wr {
  font-family: var(--font-body);
  /* 영카트 기본 style.css 의 검정 오버레이 (rgba(0,0,0,0.5)) 무력화 */
  position: static !important;
  background: transparent !important;
  opacity: 1 !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  z-index: auto !important;
}

.sct_cartop_wr select {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.sct_cartop_wr .cartopt_cart_btn,
.sct_cartop_wr .cartopt_close_btn {
  display: inline-block;
  padding: 10px 18px;
  margin-top: 8px;
  margin-right: 6px;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  transition: var(--transition);
}

.sct_cartop_wr .cartopt_cart_btn {
  background: var(--color-accent);
  color: var(--color-white);
}

.sct_cartop_wr .cartopt_cart_btn:hover {
  background: #333;
}

.sct_cartop_wr .cartopt_close_btn:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

@media (max-width: 960px) {
  .imm-shop-grid,
  .imm-shop-grid-3,
  .imm-shop-grid-4,
  .imm-shop-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 720px) {
  .imm-shop-grid,
  .imm-shop-grid-3,
  .imm-shop-grid-4,
  .imm-shop-grid-5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
}

/* =============================================
   Item detail (item.form.skin.php) — 60/40
   ============================================= */
.imm-item-detail {
  margin-top: 20px;
}

.imm-item-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

/* 갤러리 */
.imm-item-gallery {
  position: sticky;
  top: calc(var(--gnb-height) + 20px);
}

.imm-item-main-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.imm-item-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imm-item-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  list-style: none;
  padding: 0;
}

.imm-item-thumb {
  width: 76px;
  height: 76px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.imm-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imm-item-thumb.is-active {
  border-color: var(--color-accent);
}

/* 우측 구매 영역 */
.imm-item-buy {
  padding-top: 8px;
}

.imm-item-eyebrow {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.imm-item-name {
  font-family: var(--font-body);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 300;
  line-height: 1.4;
  margin-bottom: 16px;
  color: var(--color-text);
}

.imm-item-basic {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border-light);
}

.imm-item-pricebox {
  margin-bottom: 32px;
}

.imm-item-cust-price {
  font-size: 0.85rem;
  color: var(--color-text-dim);
  text-decoration: line-through;
  margin-bottom: 6px;
}

.imm-item-price {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.imm-item-options {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border-light);
}

.imm-item-section-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

/* 영카트 표준 옵션 select 톤 다운 */
.imm-item-options select,
.imm-item-options input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text);
  margin-bottom: 8px;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23555' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.imm-item-total {
  font-size: 1rem;
  margin-bottom: 24px;
  text-align: right;
  color: var(--color-text);
}

.imm-item-total strong {
  font-weight: 500;
  color: var(--color-text);
  margin-left: 8px;
}

.imm-item-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.imm-item-actions .btn {
  flex: 1;
  padding: 16px 24px;
}

.imm-item-secondary {
  display: flex;
  gap: 16px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.imm-link-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.imm-link-btn:hover {
  color: var(--color-text);
}

@media (max-width: 960px) {
  .imm-item-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .imm-item-gallery {
    position: static;
  }
}

/* =============================================
   Breadcrumb (navigation.skin.php)
   ============================================= */
.imm-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 32px;
}

.imm-breadcrumb-link {
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}

.imm-breadcrumb-link:hover {
  color: var(--color-text);
}

.imm-breadcrumb-sep {
  color: var(--color-text-dim);
  font-size: 0.7rem;
}

.imm-breadcrumb-current {
  color: var(--color-text);
  font-weight: 500;
}

/* =============================================
   Category tabs (listcategory.skin.php)
   ============================================= */
.imm-shop-cat-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--color-border-light);
}

.imm-shop-cat-tab {
  padding: 12px 24px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  position: relative;
  transition: color 0.2s ease;
}

.imm-shop-cat-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 24px;
  right: 24px;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.imm-shop-cat-tab:hover,
.imm-shop-cat-tab.is-active {
  color: var(--color-text);
}

.imm-shop-cat-tab.is-active::after {
  transform: scaleX(1);
}

/* =============================================
   Sort dropdown (list.sort.skin.php)
   ============================================= */
.imm-shop-sort {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
}

.imm-shop-sort-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.imm-shop-sort-dropdown {
  position: relative;
}

.imm-shop-sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  cursor: pointer;
  min-width: 140px;
  justify-content: space-between;
  transition: border-color 0.2s ease;
}

.imm-shop-sort-trigger:hover {
  border-color: var(--color-text);
}

.imm-shop-sort-current {
  font-weight: 500;
}

.imm-shop-sort-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  list-style: none;
  padding: 6px 0;
  margin: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.2s ease;
  z-index: 50;
}

.imm-shop-sort-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.imm-shop-sort-option {
  display: block;
  padding: 10px 18px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  transition: background 0.15s ease;
}

.imm-shop-sort-option:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.imm-shop-sort-option.is-active {
  color: var(--color-text);
  font-weight: 500;
  background: var(--color-surface-hover);
}

/* 영카트 표준 #sct_sortlst 컨테이너 활용 — 우측 정렬 */
#sct_sortlst {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 24px;
}

/* list.sub.skin (보기 타입 변경 버튼) — 잠시 숨김 */
#sct_sortlst .sct_sub,
#sct_sortlst .list_2col,
#sct_sortlst .list_3col,
#sct_sortlst .list_4col {
  display: none;
}

/* =============================================
   Item detail bottom — relation / tabs / panels (item.info.skin.php)
   ============================================= */

/* 영카트 기본 sit_buy 고정 바 — 우리 우측 패널과 중복이라 숨김 */
#sit_buy {
  display: none !important;
}

/* 관련상품 */
.imm-item-relation {
  margin-top: 80px;
  padding-top: 60px;
  border-top: 1px solid var(--color-border-light);
}

.imm-item-section-heading {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  margin-bottom: 40px;
}

/* 탭 */
.imm-item-info {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border-light);
}

.imm-item-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.imm-item-tab {
  padding: 16px 28px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  position: relative;
  transition: color 0.2s ease;
}

.imm-item-tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 28px;
  right: 28px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.imm-item-tab:hover,
.imm-item-tab.is-active {
  color: var(--color-text);
}

.imm-item-tab.is-active::after {
  transform: scaleX(1);
}

.imm-item-tab-count {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  min-width: 18px;
  font-size: 0.66rem;
  letter-spacing: 0;
  color: var(--color-accent-gold);
  font-weight: 600;
}

/* 탭 패널 */
.imm-item-panels {
  min-height: 200px;
}

.imm-item-panel {
  display: none;
  padding: 20px 0 60px;
  max-width: 900px;
  margin: 0 auto;
}

.imm-item-panel.is-active {
  display: block;
}

/* 상품 상세 설명 (it_explan HTML 컨텐츠) */
.imm-item-explan {
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--color-text-secondary);
}

.imm-item-explan p {
  margin-bottom: 18px;
}

.imm-item-explan img {
  max-width: 100%;
  height: auto;
  margin: 24px 0;
}

.imm-item-explan h1,
.imm-item-explan h2,
.imm-item-explan h3,
.imm-item-explan h4 {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-text);
  margin: 32px 0 16px;
  letter-spacing: -0.01em;
}

.imm-item-explan-h3 {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 40px 0 18px;
  font-weight: 500;
}

.imm-item-empty-msg {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

/* 상품 정보 고시 테이블 */
.imm-item-info-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 0.85rem;
}

.imm-item-info-table th,
.imm-item-info-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
  line-height: 1.6;
}

.imm-item-info-table th {
  width: 30%;
  background: var(--color-surface);
  font-weight: 500;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.imm-item-info-table td {
  color: var(--color-text);
}

/* 배송 / 교환 안내 */
.imm-item-ship {
  font-size: 0.88rem;
  line-height: 1.9;
  color: var(--color-text-secondary);
  padding: 8px 0 24px;
}

/* =============================================
   영카트 임베디드 컨텐츠 (itemuse / itemqa)
   default.css 없는 환경에서 최소 가독성 확보
   ============================================= */
.imm-item-embed {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.imm-item-embed h2,
.imm-item-embed h3 {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  font-weight: 500;
  margin: 0 0 20px;
}

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

.imm-item-embed table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.imm-item-embed table th,
.imm-item-embed table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-light);
  text-align: left;
  font-size: 0.84rem;
}

.imm-item-embed table th {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.imm-item-embed .btn,
.imm-item-embed button[type="button"],
.imm-item-embed input[type="submit"] {
  padding: 10px 18px;
  font-size: 0.74rem;
  font-family: var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition);
  border-radius: 0;
}

.imm-item-embed .btn:hover,
.imm-item-embed button[type="button"]:hover,
.imm-item-embed input[type="submit"]:hover {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.imm-item-embed input[type="text"],
.imm-item-embed input[type="password"],
.imm-item-embed input[type="email"],
.imm-item-embed textarea,
.imm-item-embed select {
  padding: 10px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text);
  border-radius: 0;
}

.imm-item-embed ul,
.imm-item-embed ol {
  padding: 0;
  margin: 0 0 16px;
  list-style: none;
}

.imm-item-embed a {
  color: var(--color-text);
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}

.imm-item-embed a:hover {
  border-bottom-color: var(--color-text);
}

.imm-item-embed .empty_table,
.imm-item-embed .empty_list {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.imm-item-embed .pg_wrap {
  margin-top: 30px;
}

@media (max-width: 600px) {
  .imm-item-tab {
    padding: 12px 16px;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
  }
  .imm-item-tab::after {
    left: 16px;
    right: 16px;
  }
  .imm-item-info-table th {
    width: 38%;
  }
}

/* =============================================
   Cart page (theme/immersetime/shop/cart.php)
   ============================================= */
.imm-cart {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 0 100px;
}

.imm-cart-header {
  text-align: center;
  margin-bottom: 56px;
}

.imm-cart-eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}

.imm-cart-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 18px;
}

.imm-cart-divider {
  width: 40px;
  height: 1px;
  background: var(--color-accent);
  margin: 0 auto;
}

/* 빈 장바구니 */
.imm-cart-empty {
  text-align: center;
  padding: 80px 24px;
  border: 1px solid var(--color-border-light);
  background: var(--color-white);
}

.imm-cart-empty-eyebrow {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent-gold);
  margin-bottom: 18px;
}

.imm-cart-empty-heading {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 300;
  color: var(--color-text);
  margin-bottom: 14px;
}

.imm-cart-empty-desc {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* Toolbar */
.imm-cart-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: 0;
}

.imm-cart-toolbar-actions {
  display: flex;
  gap: 10px;
}

/* 선택삭제 / 비우기 — 작은 outline 버튼 톤. 텍스트로만 보이면 클릭 가능한지 인식 어려움 */
.imm-cart-toolbar-actions .imm-link-btn {
  background: transparent;
  border: 1px solid #d8d8d8 !important;
  padding: 7px 14px !important;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #666 !important;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  text-decoration: none !important;
}
.imm-cart-toolbar-actions .imm-link-btn:hover {
  border-color: #1A1A1A !important;
  color: #1A1A1A !important;
  background: #fafafa;
}

.imm-cart-checkall {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: #1A1A1A;
  font-weight: 500;
  cursor: pointer;
}

/* 커스텀 체크박스 */
.imm-cart-checkall input[type="checkbox"],
.imm-cart-item-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.imm-cart-checkbox-mark {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.imm-cart-checkbox-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 5px;
  border-left: 1.5px solid var(--color-white);
  border-bottom: 1.5px solid var(--color-white);
  transform: translate(-50%, -75%) rotate(-45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.imm-cart-checkall input[type="checkbox"]:checked + .imm-cart-checkbox-mark,
.imm-cart-item-check input[type="checkbox"]:checked + .imm-cart-checkbox-mark {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.imm-cart-checkall input[type="checkbox"]:checked + .imm-cart-checkbox-mark::after,
.imm-cart-item-check input[type="checkbox"]:checked + .imm-cart-checkbox-mark::after {
  opacity: 1;
}

/* Cart list */
.imm-cart-list {
  list-style: none;
  padding: 0;
  margin: 0 0 48px;
}

.imm-cart-item {
  display: grid;
  grid-template-columns: 32px 140px 1fr auto;
  gap: 28px;
  align-items: flex-start;
  padding: 32px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.imm-cart-item-check {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  padding-top: 10px;             /* 이미지 / 상품명 라인과 시각 정렬 */
}

.imm-cart-item-image {
  display: block;
  width: 140px;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  overflow: hidden;
}

.imm-cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.imm-cart-item-image:hover img {
  transform: scale(1.04);
}

.imm-cart-item-info {
  min-width: 0;
}

.imm-cart-item-name {
  display: block;
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.imm-cart-item-name:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.imm-cart-item-options {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 6px;
  line-height: 1.6;
}

/* 커스텀 시계 부품 리스트 (imm_print_cart_options 출력)
 * 좌측: 트리 커넥터 + 라벨 + 썸네일 + 부품명
 * 우측: brace `}` 모양 + 합계 가격 (한 박스로 묶임) */
/* 부품 리스트 + preview + 합계 — 한 박스에 통합 */
.imm-cart-parts-wrap {
  display: block;
  margin: 4px 0 12px;
  background: rgba(0, 0, 0, 0.035);
}

/* 좌측: 부품 리스트 / 우측: 합성 시계 미리보기 */
.imm-cart-parts-main {
  display: flex;
  align-items: stretch;
}

.imm-cart-parts {
  position: relative;
  margin: 0;
  padding: 18px 16px 16px 36px;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px 24px;
  font-size: 0.86rem;
  line-height: 1.5;
  background: transparent;
  flex: 1;
  min-width: 0;
}

/* 합성 시계 미리보기 — customize.js 와 동일 레이어 적층 (DOM 순서 = z-index) */
.imm-cart-preview {
  position: relative;
  width: 180px;
  height: 220px;
  flex-shrink: 0;
  align-self: center;
  margin-right: 24px;
}
.imm-cart-preview-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transform-origin: center center;     /* 핸즈 회전축 = 캔버스 정중앙 */
}

/* 합계 footer — 약한 골드 구분선 + 우측 정렬 */
.imm-cart-parts-footer {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 16px;
  padding: 14px 24px 18px;
  border-top: 1px solid rgba(184, 150, 12, 0.28);
}

.imm-cart-parts-total-label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #999;
  font-weight: 500;
}

.imm-cart-parts-total-amount {
  font-size: 1.3rem;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: -0.01em;
  font-family: var(--font-body);
  white-space: nowrap;
}

.imm-cart-parts-total-amount .unit {
  font-size: 0.78rem;
  color: #888;
  margin-left: 4px;
  font-weight: 400;
}

/* 트리 세로 라인 — 첫 노드 ~ 마지막 노드 중간만 (top/bottom 잘라서 자연스러움) */
.imm-cart-parts::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: rgba(184, 150, 12, 0.45);
}

/* 각 라벨 (dt) — 좌측에 가로 dash + 골드 노드 점 */
.imm-cart-parts dt {
  position: relative;
  color: #9a9a9a;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  font-weight: 400;
  margin: 0;
  white-space: nowrap;
  align-self: center;
}
/* 가로 dash (세로 라인 → 라벨 텍스트) */
.imm-cart-parts dt::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  width: 10px;
  height: 1px;
  background: rgba(184, 150, 12, 0.45);
}
/* 노드 점 (세로 라인 위 골드 닷) */
.imm-cart-parts dt::after {
  content: '';
  position: absolute;
  left: -21px;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--color-accent-gold, #B8960C);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);   /* 라인을 살짝 가리는 흰 ring 으로 노드 강조 */
}

/* dd — 썸네일 (좌측) + 부품명 (우측). 썸네일을 먼저 봐서 시각 식별 빠름 */
.imm-cart-parts dd {
  margin: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  align-self: center;
}

.imm-cart-parts-name {
  color: #1A1A1A;
  font-weight: 500;
  font-size: 0.9rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 썸네일 박스 — 30px 정사각형 */
.imm-cart-parts-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f8f8f8;
  border: 1px solid #e8e8e8;
  flex-shrink: 0;
  overflow: hidden;
}
.imm-cart-parts-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* [ENGRAVE] 각인 행 아이콘 — 부품 썸네일 자리를 대신하는 각인 마크 */
.imm-cart-eng-ico { color: #9a9a9a; background: #fcfcfc; }
.imm-cart-eng-ico svg { display: block; }
/* 색상 닷 fallback — 이미지 없을 때 */
.imm-cart-parts-dot {
  display: block;
  width: 100%;
  height: 100%;
}

/* "다시 디자인하기" 링크 — 작은 underline 으로 호버 강조 */
.imm-cart-redesign {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  color: var(--color-accent-gold, #B8960C) !important;
  text-decoration: none;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.imm-cart-redesign:hover {
  border-bottom-color: var(--color-accent-gold, #B8960C);
}

/* 수량/배송/포인트 — 보조 정보. 톤 mute 로 위계 낮춤 */
.imm-cart-item-meta {
  font-size: 0.74rem;
  color: #aaa;
  letter-spacing: 0.04em;
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
}

.imm-cart-meta-label {
  font-family: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #aaa;
}

.imm-cart-meta-value {
  color: #888;
  font-weight: 500;
}

.imm-cart-meta-sep {
  color: #d0d0d0;
  margin: 0 2px;
}

/* 가격 — 카드 우측 강조 */
.imm-cart-item-price {
  text-align: right;
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--color-text);
  white-space: nowrap;
  padding-top: 10px;
  align-self: flex-start;
}

.imm-cart-item-amount {
  font-weight: 500;
  letter-spacing: -0.01em;
}

.imm-cart-item-currency {
  font-size: 0.74rem;
  color: #888;
  margin-left: 4px;
  font-weight: 400;
}

/* Order summary */
.imm-cart-summary {
  background: var(--color-surface);
  padding: 36px 32px;
  margin-top: 24px;
}

.imm-cart-summary-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-light);
}

.imm-cart-summary-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.imm-cart-summary-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  font-size: 0.88rem;
  color: var(--color-text-secondary);
}

.imm-cart-summary-list li strong {
  font-weight: 500;
  color: var(--color-text);
}

.imm-cart-summary-point strong {
  color: var(--color-accent-gold);
}

.imm-cart-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 20px;
  border-top: 1px solid var(--color-accent);
  font-size: 1rem;
}

.imm-cart-summary-total span {
  color: var(--color-text);
  font-weight: 500;
}

.imm-cart-summary-total strong {
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.imm-cart-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}

.imm-cart-actions .btn {
  width: 100%;
  text-align: center;
}

/* 주요 액션 — 주문하기. 차콜 → 골드 transition + 화살표 모션
 * specificity 강화: .imm-cart-actions > .imm-cart-checkout = 0,0,2,0
 * (.btn-primary / .btn 의 기본 룰을 확실히 덮어쓰기) */
.imm-cart-actions .imm-cart-checkout {
  position: relative;
  padding: 20px 24px !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  font-weight: 500 !important;
  background: #1A1A1A !important;
  color: #fff !important;
  border: 1px solid #1A1A1A !important;
  transition: background-color 0.3s ease,
              border-color 0.3s ease,
              letter-spacing 0.3s ease;
}
.imm-cart-actions .imm-cart-checkout::after {
  content: '→';
  display: inline-block;
  margin-left: 14px;
  transition: transform 0.3s ease;
  letter-spacing: 0;
}
.imm-cart-actions .imm-cart-checkout:hover {
  background: #B8960C !important;
  border-color: #B8960C !important;
  color: #fff !important;
  letter-spacing: 0.22em !important;
}
.imm-cart-actions .imm-cart-checkout:hover::after {
  transform: translateX(6px);
}

/* 보조 액션 — 계속 쇼핑하기. 톤 다운된 ghost 버튼 */
.imm-cart-actions .btn-outline {
  padding: 14px 24px !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.08em !important;
  background: transparent !important;
  color: #888 !important;
  border: 1px solid transparent !important;
  font-weight: 400 !important;
  text-transform: none !important;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.imm-cart-actions .btn-outline:hover {
  color: #1A1A1A !important;
  border-color: #d0d0d0 !important;
  background: transparent !important;
}

/* Naver Pay — 다른 결제 수단임을 명확히. 약한 구분선 + 작은 라벨 */
.imm-cart-naverpay {
  position: relative;
  margin-top: 24px;
  padding-top: 24px;
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--color-border-light, #ececec);
}
.imm-cart-naverpay::before {
  content: 'OR PAY WITH';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 14px;
  background: var(--color-white, #fff);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--color-text-muted, #aaa);
  font-weight: 500;
}

/* 모바일 */
@media (max-width: 768px) {
  .imm-cart {
    padding: 40px 0 80px;
  }
  .imm-cart-item {
    grid-template-columns: 28px 84px 1fr;
    gap: 14px;
    padding: 20px 0;
  }
  .imm-cart-item-image {
    width: 84px;
  }
  .imm-cart-item-price {
    grid-column: 2 / -1;
    text-align: left;
    margin-top: 8px;
  }
  .imm-cart-summary {
    padding: 24px 20px;
  }
  .imm-cart-toolbar {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* =============================================
   Order form / inquiry — CSS-only tone-up
   영카트 표준 마크업 위에 OVELI 디자인 덮어쓰기
   ============================================= */

/* 영카트 #sod_bsk, #sod_v 등 컨테이너를 OVELI 톤으로 */
#sod_bsk,
#sod_fin,
#sod_v {
  font-family: var(--font-body);
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 0;
  color: var(--color-text);
}

#sod_fin h1,
#sod_v h1 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  margin: 20px 0 36px;
  color: var(--color-text);
}

/* 폼 입력 */
.shop-page input[type="text"],
.shop-page input[type="tel"],
.shop-page input[type="email"],
.shop-page input[type="password"],
.shop-page input[type="number"],
.shop-page input[type="date"],
.shop-page select,
.shop-page textarea {
  font-family: var(--font-body);
  font-size: 0.88rem;
  padding: 12px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 0;
  transition: border-color 0.2s ease;
}

.shop-page input[type="text"]:focus,
.shop-page input[type="tel"]:focus,
.shop-page input[type="email"]:focus,
.shop-page input[type="password"]:focus,
.shop-page input[type="number"]:focus,
.shop-page input[type="date"]:focus,
.shop-page select:focus,
.shop-page textarea:focus {
  border-color: var(--color-accent);
  outline: none;
}

.shop-page label {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}

/* 폼 섹션 헤더 */
.shop-page h2,
.shop-page #sod_fin h2,
.shop-page #sod_v h2 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  padding-bottom: 14px;
  margin: 32px 0 20px;
  border-bottom: 1px solid var(--color-accent);
}

/* 영카트 표준 테이블 */
.shop-page .tbl_head01,
.shop-page .tbl_head02,
.shop-page .tbl_head03,
.shop-page .tbl_wrap {
  margin-bottom: 24px;
}

.shop-page .tbl_head01 table,
.shop-page .tbl_head02 table,
.shop-page .tbl_head03 table,
.shop-page .tbl_wrap table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--color-accent);
}

.shop-page .tbl_head01 th,
.shop-page .tbl_head02 th,
.shop-page .tbl_head03 th,
.shop-page .tbl_wrap th {
  padding: 14px;
  background: var(--color-surface);
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
}

.shop-page .tbl_head01 td,
.shop-page .tbl_head02 td,
.shop-page .tbl_head03 td,
.shop-page .tbl_wrap td {
  padding: 14px;
  font-size: 0.88rem;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-light);
}

/* 영카트 버튼 */
.shop-page .btn,
.shop-page .btn_cart,
.shop-page .btn_buy,
.shop-page .btn_submit,
.shop-page .btn_frmline,
.shop-page button[type="submit"]:not(.imm-cart-checkout):not(.btn-primary):not(.btn-outline) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
  border-radius: 0;
  transition: var(--transition);
  text-decoration: none;
}

.shop-page .btn:hover,
.shop-page .btn_cart:hover,
.shop-page .btn_submit:hover,
.shop-page button[type="submit"]:not(.imm-cart-checkout):not(.btn-primary):not(.btn-outline):hover {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.shop-page .btn01 {
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

.shop-page .btn02,
.shop-page .btn_buy {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

/* 주문 폼 합계 박스 */
.shop-page #sod_fin_tot,
.shop-page #sod_bsk_tot {
  background: var(--color-surface);
  padding: 28px 32px;
  margin: 24px 0;
  border-top: 1px solid var(--color-accent);
}

.shop-page #sod_fin_tot ul,
.shop-page #sod_bsk_tot ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.shop-page #sod_fin_tot li,
.shop-page #sod_bsk_tot li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.88rem;
  color: var(--color-text-secondary);
}

.shop-page #sod_fin_tot li strong,
.shop-page #sod_bsk_tot li strong {
  color: var(--color-text);
  font-weight: 500;
}

/* 영카트 알림 메시지 */
.shop-page .empty_table,
.shop-page .empty_list {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

/* 영카트 라디오 버튼 정리 */
.shop-page input[type="radio"],
.shop-page input[type="checkbox"]:not(.selec_chk) {
  margin-right: 6px;
}

/* 페이지 타이틀 영역 */
.shop-page #wrapper_title {
  display: none; /* 영카트 기본 타이틀 숨김 — h2 등으로 대체 */
}

/* 영카트 기본 hd 영역 (sod_v 위 등) 숨김 */
.shop-page #sit_pvi,
.shop-page #sct_admin,
.shop-page #sit_admin {
  display: none;
}

/* =============================================
   Auth pages — login / register / register_result / password_lost
   ============================================= */
.imm-auth-page {
  max-width: 460px;
  margin: 0 auto;
  /* ※ 고정 헤더만큼 밀어주는 건 .page-content(padding-top: var(--gnb-height))가 이미 한다.
     여기서 --gnb-height 를 또 더하면 상단 여백이 두 배가 된다. */
  padding: clamp(20px, 3vw, 36px) 20px clamp(48px, 6vw, 80px);
}

.imm-auth-page-wide {
  max-width: 760px;
}

.imm-auth-card {
  background: var(--color-white);
  padding: clamp(36px, 5vw, 60px) clamp(24px, 4vw, 48px);
  border: 1px solid var(--color-border-light);
  margin-bottom: 24px;
}

.imm-auth-header {
  text-align: center;
  margin-bottom: 36px;
}

.imm-auth-eyebrow {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

.imm-auth-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 18px;
}

.imm-auth-subtitle {
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 16px;
}

.imm-auth-divider {
  width: 32px;
  height: 1px;
  background: var(--color-accent);
  margin: 0 auto 18px;
}

.imm-auth-lead {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.imm-auth-note {
  font-size: 0.84rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0 0 20px;
}

.imm-auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.imm-auth-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.imm-auth-label {
  font-family: var(--font-body);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  color: var(--color-text);
  font-weight: 500;
}

.imm-auth-input {
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 0;
  transition: border-color 0.2s ease;
  width: 100%;
}

.imm-auth-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.imm-auth-input::placeholder {
  color: var(--color-text-dim);
}

/* 커스텀 체크박스 (cart 의 그것과 동일 톤) */
.imm-auth-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  letter-spacing: 0.02em;
}

.imm-auth-checkbox-block {
  display: flex;
  margin-top: 14px;
}

.imm-auth-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.imm-auth-checkbox-mark {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.imm-auth-checkbox-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid var(--color-white);
  border-bottom: 1.5px solid var(--color-white);
  transform: translate(-50%, -75%) rotate(-45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.imm-auth-checkbox input[type="checkbox"]:checked + .imm-auth-checkbox-mark {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.imm-auth-checkbox input[type="checkbox"]:checked + .imm-auth-checkbox-mark::after {
  opacity: 1;
}

.imm-auth-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.78rem;
}

.imm-auth-link {
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  transition: var(--transition);
}

.imm-auth-link:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

/* 로그인 폼 submit 위 여백 */
.imm-auth-form .btn {
  margin-top: 8px;
}

/* 회원가입 유도 — 로그인 카드 하단의 subtle 안내 */
.imm-auth-signup-invite {
  margin: 32px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--color-border-light);
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.imm-auth-link-strong {
  margin-left: 6px;
  color: var(--color-text);
  font-weight: 500;
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.imm-auth-link-strong:hover {
  color: var(--color-accent-gold);
  border-bottom-color: var(--color-accent-gold);
}

.imm-auth-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}

.imm-auth-actions-center {
  justify-content: center;
}

.imm-auth-actions .btn {
  flex: 1;
  padding: 14px 20px;
}

.imm-auth-actions-center .btn {
  flex: 0 0 auto;
  min-width: 160px;
}

.imm-auth-footer {
  text-align: center;
  margin-top: 24px;
}

/* Guest checkout / Order inquiry 카드 */
.imm-auth-guest {
  background: var(--color-surface);
}

.imm-auth-guest-policy {
  background: var(--color-white);
  padding: 16px 18px;
  margin: 18px 0;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--color-border-light);
}

/* 회원가입 약관 페이지 */
.imm-terms-section {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-border-light);
}

.imm-terms-section:last-of-type {
  border-bottom: none;
}

.imm-terms-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 18px;
}

.imm-terms-content {
  width: 100%;
  height: 180px;
  padding: 16px 18px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 0;
  resize: vertical;
  margin-bottom: 18px;
}

.imm-terms-content:focus {
  outline: none;
  border-color: var(--color-accent);
}

.imm-terms-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  border-top: 1px solid var(--color-accent);
}

.imm-terms-table th,
.imm-terms-table td {
  padding: 12px 14px;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--color-border-light);
  text-align: left;
  line-height: 1.6;
}

.imm-terms-table th {
  background: var(--color-surface);
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.imm-terms-table td {
  color: var(--color-text);
}

.imm-terms-chkall {
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
}

/* 가입 완료 페이지 */
.imm-auth-result {
  text-align: center;
}

.imm-auth-result-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  color: var(--color-accent-gold);
}

.imm-auth-result-section {
  margin: 32px 0;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  text-align: left;
}

.imm-auth-result-note {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0 0 20px;
}

.imm-auth-result-info {
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  padding: 14px 0;
  margin-bottom: 16px;
}

.imm-auth-result-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
}

.imm-auth-result-label {
  flex: 0 0 70px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.imm-auth-result-value {
  font-weight: 500;
  color: var(--color-text);
  font-size: 0.92rem;
}

.imm-auth-result-hint {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* 본인인증 버튼 그룹 */
.imm-auth-cert-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 480px) {
  .imm-auth-card {
    padding: 28px 22px;
  }
  .imm-auth-actions {
    flex-direction: column;
  }
  .imm-auth-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =============================================================
   Auth Split Layout — login.skin.php
   좌측: 폼 / 우측: 히어로 비주얼 + 글래스카드 + 블러 오브
   GNB / Footer 숨김 처리 (auth gateway 모드)
   ============================================================= */

/* GNB / Footer / main padding 무력화 */
body:has(.imm-auth-split-page) .gnb,
body:has(.imm-auth-split-page) .gnb-mobile-menu,
body:has(.imm-auth-split-page) .footer {
  display: none !important;
}

body:has(.imm-auth-split-page) .page-content,
body:has(.imm-auth-split-page) .page-content.page-home {
  padding: 0 !important;
}

body:has(.imm-auth-split-page) {
  overflow-x: hidden;
}

.imm-auth-split-page {
  display: grid;
  grid-template-columns: minmax(420px, 3.5fr) 6.5fr;
  min-height: 100vh;
  width: 100%;
  background: var(--color-white);
}

/* ── 좌측: 폼 ── */
.imm-auth-split-left {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 64px);
  position: relative;
  background: var(--color-white);
}

.imm-auth-split-form-wrap {
  width: 100%;
  max-width: 420px;
}

.imm-auth-split-logo {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.28em;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  margin-bottom: clamp(40px, 5vw, 60px);
}

.imm-auth-split-form-wrap .imm-auth-header {
  text-align: left;
  margin-bottom: 36px;
}

.imm-auth-split-form-wrap .imm-auth-divider {
  margin: 0 0 18px;
}

.imm-auth-split-form-wrap .imm-auth-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: 0.18em;
}

.imm-auth-split-form-wrap .imm-auth-eyebrow {
  margin-bottom: 16px;
}

/* 비회원 영역 (결제 진입 시) */
.imm-auth-guest-inline {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px dashed var(--color-border);
}

.imm-auth-guest-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--font-display);
}

.imm-auth-guest-divider span {
  flex: 0 0 auto;
}

.imm-auth-guest-divider::before,
.imm-auth-guest-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-light);
}

.imm-auth-guest-policy-toggle {
  margin: 14px 0;
}

.imm-auth-guest-policy-toggle summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  padding: 8px 0;
  letter-spacing: 0.02em;
  list-style: none;
  position: relative;
}

.imm-auth-guest-policy-toggle summary::before {
  content: '+';
  margin-right: 8px;
  font-weight: 500;
  color: var(--color-accent);
}

.imm-auth-guest-policy-toggle[open] summary::before {
  content: '−';
}

.imm-auth-guest-policy-toggle summary::-webkit-details-marker {
  display: none;
}

/* ── 우측: 히어로 비주얼 ── */
.imm-auth-split-right {
  position: relative;
  overflow: hidden;
  background: var(--color-black);
  min-height: 100vh;
}

/* 폴백 배경 이미지 (비디오 미존재 시) */
.imm-auth-split-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.65) saturate(1.1);
  transform: scale(1.05);
  animation: imm-auth-bg-zoom 18s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes imm-auth-bg-zoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1.15); }
}

/* 메인 비디오 — 로드 성공 시 폴백 이미지 위에 덮어씌움 */
.imm-auth-split-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65) saturate(1.1);
  z-index: 2;
}

/* 다크 시네마틱 오버레이 — radial 비네팅 + edge 다크닝 */
.imm-auth-split-overlay {
  position: absolute;
  inset: 0;
  background:
    /* spotlight 효과: 우측 상단에서 빛이 들어오는 느낌 */
    radial-gradient(ellipse 80% 60% at 65% 35%, transparent 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.6) 100%),
    /* 상하 미세한 페이드 */
    linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.35) 100%);
  z-index: 3;
}

/* 필름 그레인 — 디지털티 제거, organic 한 깊이감 (SVG 노이즈) */
.imm-auth-split-pattern {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.18;
  mix-blend-mode: overlay;
  z-index: 3;
  pointer-events: none;
}

/* 럭셔리 직물 위브 — 거의 안 보일 정도로 미세한 사선 (질감만) */
.imm-auth-split-stripes {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    105deg,
    transparent 0,
    transparent 2px,
    rgba(255, 255, 255, 0.03) 2px,
    rgba(255, 255, 255, 0.03) 3px
  );
  z-index: 3;
  pointer-events: none;
}

/* 글래스 카드 — 우측 하단 floating */
.imm-auth-glass-card {
  position: absolute;
  bottom: clamp(40px, 6vw, 80px);
  left: clamp(40px, 5vw, 64px);
  right: clamp(40px, 5vw, 64px);
  z-index: 5;
  padding: clamp(28px, 3vw, 44px);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  color: rgba(255, 255, 255, 0.95);
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.imm-auth-glass-eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent-gold-light);
  margin-bottom: 14px;
  font-weight: 500;
}

.imm-auth-glass-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  letter-spacing: 0.08em;
  font-weight: 500;
  line-height: 1.15;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: #fff;
}

.imm-auth-glass-desc {
  font-size: 0.88rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
  margin: 0;
}

/* 블러 오브 — 깊이감 */
.imm-auth-blur {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
}

.imm-auth-blur-1 {
  width: 360px;
  height: 360px;
  top: -120px;
  right: -100px;
  background: radial-gradient(circle, rgba(184, 150, 12, 0.35), transparent 70%);
  animation: imm-auth-float 14s ease-in-out infinite;
}

.imm-auth-blur-2 {
  width: 280px;
  height: 280px;
  bottom: -80px;
  left: 30%;
  background: radial-gradient(circle, rgba(192, 64, 48, 0.28), transparent 70%);
  animation: imm-auth-float 18s ease-in-out infinite reverse;
}

.imm-auth-blur-3 {
  width: 220px;
  height: 220px;
  top: 30%;
  left: -60px;
  background: radial-gradient(circle, rgba(255, 200, 120, 0.18), transparent 70%);
  animation: imm-auth-float 22s ease-in-out infinite;
}

@keyframes imm-auth-float {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(20px, -30px); }
  66% { transform: translate(-25px, 20px); }
}

/* ── 반응형 ── */
@media (max-width: 960px) {
  .imm-auth-split-page {
    grid-template-columns: 1fr;
  }
  .imm-auth-split-right {
    display: none;  /* 모바일에선 비주얼 영역 숨김 */
  }
  .imm-auth-split-left {
    min-height: 100vh;
  }
}

@media (max-width: 480px) {
  .imm-auth-split-left {
    padding: 36px 22px;
  }
  .imm-auth-split-logo {
    margin-bottom: 32px;
  }
}

/* =====================================================
   PHASE 7 — 모바일 폴리싱 (반응형 강화)
   ===================================================== */

/* iOS 입력 시 자동 줌 방지 — input/select font-size 최소 16px */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  textarea,
  select,
  .imm-auth-input,
  .form-input {
    font-size: 16px !important;
  }
}

/* Login split-page — min-width 제거하여 작은 모바일에서도 깨짐 없음 */
@media (max-width: 960px) {
  .imm-auth-split-page {
    grid-template-columns: 1fr;
  }
  .imm-auth-split-form-wrap {
    max-width: 100%;
  }
}

/* GNB 모바일 메뉴 — 슬라이드 인 효과 + 더 큰 터치 영역 */
@media (max-width: 768px) {
  .gnb-mobile-menu {
    padding: 40px 24px;
  }
  .gnb-mobile-menu .gnb-link {
    font-size: 0.95rem;
    padding: 14px 0;
    letter-spacing: 0.08em;
  }
  .gnb-mobile-menu .gnb-cta {
    width: 100%;
    text-align: center;
    margin-top: 12px;
    padding: 16px 24px;
  }

  /* GNB 자체 패딩 줄임 */
  .gnb-inner {
    padding: 0 18px;
  }
  .gnb-logo {
    font-size: 1.05rem;
    letter-spacing: 0.18em;
  }
}

/* Hero 모바일 — 텍스트 위치 + 버튼 터치 영역 */
@media (max-width: 600px) {
  .hero-banner {
    /* 너무 큰 100vh 대신 모바일 적정 높이 */
    height: 85vh;
    min-height: 520px;
  }
  .banner-content {
    bottom: 14%;
    left: 24px;
    right: 24px;
  }
  .banner-label {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
  }
  .banner-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    margin-bottom: 20px;
  }
  .banner-cta {
    padding: 14px 28px;
    font-size: 0.78rem;
  }
  .banner-indicators {
    bottom: 24px;
    right: 24px;
  }
}

/* Collection / 상품 카드 — 모바일 가독성 */
@media (max-width: 600px) {
  .imm-shop-grid,
  .imm-shop-grid-3,
  .imm-shop-grid-4,
  .imm-shop-grid-5 {
    grid-template-columns: 1fr 1fr;
    gap: 20px 12px;
  }
  .imm-product-name {
    font-size: 0.88rem;
  }
  .imm-product-spec {
    font-size: 0.7rem;
  }
  .imm-product-cart {
    font-size: 0.66rem;
    padding: 9px 8px;
    letter-spacing: 0.08em;
  }
}

/* Cart / Order summary — 모바일 단순화 */
@media (max-width: 600px) {
  .imm-cart-title {
    font-size: 1.4rem;
    letter-spacing: 0.14em;
  }
  .imm-cart-summary {
    padding: 24px 18px;
  }
  .imm-cart-summary-total strong {
    font-size: 1.2rem;
  }
  .imm-cart-toolbar {
    padding: 12px 0;
  }
}

/* Brand Story / Editorial / CTA — 모바일 패딩 */
@media (max-width: 600px) {
  .brand-section {
    grid-template-columns: 1fr;
  }
  .brand-visual {
    height: 60vw;
    min-height: 280px;
  }
  .brand-text {
    padding: 36px 24px 48px;
  }
  .editorial-section {
    padding: 60px 0;
  }
  .cta-section {
    padding: 60px 0;
  }
  .cta-inner {
    flex-direction: column;
    text-align: center;
    gap: 32px;
  }
  .cta-images {
    width: 220px;
  }
}

/* About / Contact 페이지 모바일 */
@media (max-width: 600px) {
  .page-hero {
    padding: 80px 20px 40px;
  }
  .page-section {
    padding: 40px 0 60px;
  }
  .placeholder-card,
  .contact-cta {
    padding: 36px 20px;
  }
}

/* 영카트 표준 페이지 (orderform 등) 모바일 보정 */
@media (max-width: 600px) {
  .shop-page .tbl_head01 table,
  .shop-page .tbl_head02 table,
  .shop-page .tbl_head03 table {
    font-size: 0.8rem;
  }
  .shop-page .tbl_head01 th,
  .shop-page .tbl_head01 td,
  .shop-page .tbl_head02 th,
  .shop-page .tbl_head02 td,
  .shop-page .tbl_head03 th,
  .shop-page .tbl_head03 td {
    padding: 10px;
  }
}

/* 글래스 카드 모바일 — Login split 의 우측 hide 되지만 보조용 */
@media (max-width: 480px) {
  .imm-cart-actions {
    flex-direction: column-reverse;
  }
  .imm-cart-actions .btn {
    width: 100%;
  }
  .imm-item-actions {
    flex-direction: column-reverse;
  }
  .imm-item-actions .btn {
    width: 100%;
  }
  .imm-item-secondary {
    justify-content: center;
  }
}

/* 모바일에서 .imm-shop-cat-tabs 가로 스크롤 */
@media (max-width: 600px) {
  .imm-shop-cat-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .imm-shop-cat-tabs::-webkit-scrollbar {
    display: none;
  }
  .imm-shop-cat-tab {
    flex-shrink: 0;
    padding: 12px 20px;
    font-size: 0.7rem;
  }
}

/* 모바일 푸터 */
@media (max-width: 600px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    padding: 0 20px;
  }
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 20px;
  }
}

/* 메뉴 햄버거 — 더 명확한 hit area */
@media (max-width: 768px) {
  .gnb-hamburger {
    width: 28px;
    height: 28px;
    padding: 6px 0;
  }
}


/* ============================================================
 * Customize CTA Banner — TIMEPIECES (완성품) 페이지 하단 배너
 * 비율: 16:5 (1920×600 권장). 좌측 텍스트 오버레이 + 우측 이미지.
 * ============================================================ */
.imm-shop-cta {
  margin: 64px 0 40px;
}

.imm-shop-cta-link {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 5;
  min-height: 360px;
  text-decoration: none;
  color: inherit;
  background: #1A1A1A;
}

.imm-shop-cta-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  transition: transform 1.2s ease;
}
.imm-shop-cta-link:hover .imm-shop-cta-image {
  transform: scale(1.04);
}

/* AI 배너 이미지가 이미 좌→우 그라데이션을 담고 있어 추가 overlay 불필요.
 * 만약 텍스트 가독성이 부족하면 background 를 약하게 부활:
 *   background: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 50%); */
.imm-shop-cta-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

.imm-shop-cta-content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 60px 80px;
  max-width: 640px;
  color: #fff;
}

.imm-shop-cta-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-accent-gold, #B8960C);
  margin: 0 0 20px;
  font-weight: 500;
}

.imm-shop-cta-title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  color: #fff;
}

.imm-shop-cta-desc {
  font-size: 0.94rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
  margin: 0 0 32px;
  max-width: 440px;
}

.imm-shop-cta-button {
  display: inline-block;
  padding: 14px 32px;
  border: 1px solid #fff;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  transition: background-color 0.3s ease, border-color 0.3s ease,
              color 0.3s ease, padding 0.3s ease;
}
.imm-shop-cta-link:hover .imm-shop-cta-button {
  background: var(--color-accent-gold, #B8960C);
  border-color: var(--color-accent-gold, #B8960C);
  padding: 14px 40px;
}

@media (max-width: 768px) {
  .imm-shop-cta {
    margin: 40px 0 32px;
  }
  .imm-shop-cta-link {
    aspect-ratio: 4 / 3;
    min-height: 420px;
  }
  .imm-shop-cta-overlay {
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.55) 50%,
      rgba(0,0,0,0.4) 100%
    );
  }
  .imm-shop-cta-content {
    padding: 40px 28px;
    max-width: 100%;
  }
  .imm-shop-cta-title {
    font-size: 1.5rem;
  }
  .imm-shop-cta-desc {
    font-size: 0.86rem;
    margin-bottom: 24px;
  }
  .imm-shop-cta-button {
    padding: 12px 28px;
    font-size: 0.74rem;
  }
}

/* ============================================================
   [DETAIL] 상세 이미지 미리보기 — 'i' 버튼 + 오버레이 (전역 공용)
   ------------------------------------------------------------
   customize.php(부품 선택)와 collection.php(파츠 카드)가 함께 쓴다.
   마크업은 tail.php, 동작은 js/common.js 의 initDetailOverlay().
   ※ 원래 customize.css 에 있었으나 컬렉션에서도 필요해 여기로 옮김.
   ============================================================ */
.option-info-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.12);   /* 밝은 부품색에서도 원 테두리가 보이도록 중립 링 */
  background: var(--color-accent-gold);       /* 부품 색상 없을 때 폴백 (JS 가 inline 으로 부품색 지정) */
  color: #fff;                                /* 아이콘 흰색 — 밝은 부품색은 JS 가 어두운 아이콘으로 보정 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.option-info-btn svg { width: 18px; height: 18px; }
.option-info-btn:hover {
  transform: scale(1.08);
  filter: brightness(1.08);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.30);
}
/* 상세 이미지 없는 부품 — 흐린 회색으로 비활성 구분 */
.option-info-btn.is-disabled {
  border-color: var(--color-border);
  color: var(--color-text-dim);
  background: var(--color-white);
  box-shadow: none;
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
  transform: none;
  filter: none;
}

/* ── 'i' 호버 대기 링 — 마우스를 올리고 있으면 테두리가 한 바퀴 채워지고,
      다 차면 상세 모달이 열린다. 도중에 벗어나면 사라지고 리셋.
      ★ 대기 시간은 --io-dwell 한 곳에서만 관리 (common.js 가 이 값을 읽어 타이머를 맞춘다)
      ★ 링 색은 --io-ring-color (버튼 밖 카드 이미지 위에 그려지므로 어두운 색이 기본)
      @property 미지원 브라우저에선 링만 안 보이고 모달은 정상 동작. ── */
@property --io-ring {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.option-info-btn {
  --io-dwell: 1.2s;
  --io-ring-color: #1A1A1A;
}
.option-info-btn::after {
  content: '';
  position: absolute;
  inset: -4px;                 /* 버튼 바깥으로 살짝 큰 링 */
  border-radius: 50%;
  padding: 2px;                /* = 링 두께 */
  background: conic-gradient(var(--io-ring-color) var(--io-ring), transparent 0);
  /* 가운데를 뚫어 '테두리'로 만드는 마스크 */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85));   /* 어두운 이미지 위에서도 보이게 */
  opacity: 0;
  pointer-events: none;
}
.option-info-btn.is-dwell::after {
  opacity: 1;
  animation: io-ring-fill var(--io-dwell) linear forwards;
}
@keyframes io-ring-fill {
  from { --io-ring: 0deg; }
  to   { --io-ring: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .option-info-btn.is-dwell::after { animation: none; opacity: 0; }
}

/* ── 상세 이미지 오버레이 (PC peek / 모바일 modal 공용) ── */
.imm-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.imm-detail-overlay[hidden] { display: none; }
.imm-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.imm-detail-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  background: var(--color-white);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}
.imm-detail-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 스크롤바 — 트랙 없이 검정 막대만 (customize.css 의 .imm-list 스크롤바와 같은 방식) */
  scrollbar-width: thin;                        /* Firefox */
  scrollbar-color: #1A1A1A transparent;
}
.imm-detail-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.imm-detail-scroll::-webkit-scrollbar-track { background: transparent; }
.imm-detail-scroll::-webkit-scrollbar-thumb {
  background: #1A1A1A;
  border-radius: 999px;
  border: 2.5px solid transparent;   /* 안쪽 여백 → 얇고 둥근 막대 */
  background-clip: padding-box;
}
.imm-detail-scroll::-webkit-scrollbar-thumb:hover {
  background: #000;
  background-clip: padding-box;
}
.imm-detail-img {
  display: block;
  width: 100%;
  height: auto;
}
.imm-detail-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-white);
  color: var(--color-text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.imm-detail-close:hover { color: var(--color-accent); }

/* PC 미리보기(peek): 포인터 이벤트 통과 + 배경 옅게 + 닫기버튼 숨김 */
.imm-detail-overlay.is-peek { pointer-events: none; }
.imm-detail-overlay.is-peek .imm-detail-backdrop { background: rgba(0, 0, 0, 0.28); }
.imm-detail-overlay.is-peek .imm-detail-close { display: none; }

/* 모바일 모달: 클릭 가능 (닫기버튼/배경탭으로 닫기) */
.imm-detail-overlay.is-modal { pointer-events: auto; }

/* ============================================================
   [REGISTER] 회원가입 폼 전용 — 기존 .imm-auth-* 체계에 없는 것만 추가
   (skin/member/basic/register_form.skin.php 에서 사용)
   ============================================================ */
.imm-req { color: var(--color-error); font-style: normal; font-weight: 600; }
.imm-auth-optional {
  font-size: 0.72rem; font-weight: 400; color: var(--color-text-muted);
  letter-spacing: 0;
}
.imm-auth-help {
  margin: 6px 0 0; font-size: 0.74rem; line-height: 1.5; color: var(--color-text-muted);
}

/* 비밀번호 보기 토글 */
.imm-auth-pw { position: relative; }
.imm-auth-pw .imm-auth-input { padding-right: 44px; }
.imm-auth-pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border: none; background: none; cursor: pointer; padding: 0;
  color: var(--color-text-dim); border-radius: 50%;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.imm-auth-pw-toggle:hover { color: var(--color-text-secondary); background: var(--color-surface); }
.imm-auth-pw-toggle.is-on { color: var(--color-accent-gold); }

/* 수신 동의 묶음 */
.imm-auth-agree { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 20px; }
.imm-auth-agree .imm-auth-checkbox { font-size: 0.82rem; color: var(--color-text-secondary); }

/* 자동등록방지 — 기본 캡차 마크업이 폼 폭을 넘지 않게 */
.imm-auth-captcha { margin: 0 0 20px; }
.imm-auth-captcha img { max-width: 100%; height: auto; vertical-align: middle; }
.imm-auth-captcha #captcha_key,
.imm-auth-captcha input[type="text"] {
  width: 100%; margin-top: 8px; padding: 12px 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-white); color: var(--color-text); font: inherit;
}

/* ============================================================
   [TERMS] 약관 동의 — 한 줄 행 + 아코디언
   ------------------------------------------------------------
   체크박스 1차 클릭 = 펼치기 / 2차 클릭 = 실제 동의.
   펼침 영역이 '행 아래'로 열리므로 체크박스 위치가 고정된다
   → 마우스를 옮기지 않고 같은 자리를 두 번 누르면 된다.
   (skin/member/basic/register.skin.php)
   ============================================================ */
.imm-terms { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }

.imm-term {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.imm-term.is-open { border-color: var(--color-text-dim); }

/* 한 줄 행 — [제목 ............ 동의 ☐] */
.imm-term-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer;
  transition: background var(--transition-fast);
}
.imm-term-row:hover { background: var(--color-surface); }
.imm-term-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 0.9rem; font-weight: 600; color: var(--color-text);
}
.imm-term-name .imm-req {
  margin-left: 6px; font-size: 0.68rem; font-weight: 500;
  color: var(--color-error); vertical-align: 1px;
}

/* 우측 동의 체크 */
.imm-term-check {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; user-select: none; padding: 4px 2px;
}
.imm-term-check-text { font-size: 0.8rem; color: var(--color-text-secondary); }
.imm-term-check input { position: absolute; opacity: 0; width: 0; height: 0; }

/* 체크 표시 — 기존 규칙이 .imm-auth-checkbox 하위로 한정돼 있어 여기서 다시 지정한다 */
.imm-term-check input[type="checkbox"]:checked + .imm-auth-checkbox-mark,
.imm-term-all   input[type="checkbox"]:checked + .imm-auth-checkbox-mark {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.imm-term-check input[type="checkbox"]:checked + .imm-auth-checkbox-mark::after,
.imm-term-all   input[type="checkbox"]:checked + .imm-auth-checkbox-mark::after {
  opacity: 1;
}
/* '동의' 글자는 input 보다 앞에 있어 형제 선택자(~)로 못 잡는다 → :has() 사용
   (이 테마는 이미 body:has(...) 를 쓰고 있어 지원 범위가 동일하다) */
.imm-term-check:has(input:checked) .imm-term-check-text { color: var(--color-text); font-weight: 600; }

/* 펼침 패널 — max-height 로 애니메이션 (auto 는 transition 불가) */
.imm-term-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.imm-term-body {
  max-height: 260px; overflow-y: auto;
  padding: 0 16px 16px;
  font-size: 0.8rem; line-height: 1.7; color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border-light);
  padding-top: 14px;
  /* 스크롤바 — 상세 오버레이와 동일 톤 */
  scrollbar-width: thin;
  scrollbar-color: rgba(120,120,128,0.4) transparent;
}
.imm-term-body::-webkit-scrollbar { width: 8px; }
.imm-term-body::-webkit-scrollbar-track { background: transparent; }
.imm-term-body::-webkit-scrollbar-thumb {
  background: rgba(120,120,128,0.35); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
.imm-term-extra { margin-top: 14px; }

/* 펼친 뒤 "이제 누르세요" 신호 — 체크박스만 깜빡임 */
.imm-term.is-armed .imm-auth-checkbox-mark {
  animation: imm-term-blink 0.9s ease-in-out infinite;
}
.imm-term.is-armed .imm-term-check-text { color: var(--color-accent-gold); font-weight: 600; }
@keyframes imm-term-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 150, 12, 0.55); border-color: var(--color-accent-gold); }
  50%      { box-shadow: 0 0 0 6px rgba(184, 150, 12, 0);  border-color: var(--color-accent-gold); }
}
@media (prefers-reduced-motion: reduce) {
  .imm-term.is-armed .imm-auth-checkbox-mark { animation: none; border-color: var(--color-accent-gold); }
  .imm-term-panel { transition: none; }
}

/* 전체 동의 */
.imm-term-all {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; margin: 0 0 22px;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); cursor: pointer; font-size: 0.88rem;
}
.imm-term-all input { position: absolute; opacity: 0; width: 0; height: 0; }
.imm-term-all:hover { border-color: var(--color-text-dim); }

@media (max-width: 520px) {
  .imm-term-row { padding: 12px 13px; }
  .imm-term-name { font-size: 0.85rem; }
  .imm-term-body { padding: 12px 13px 13px; max-height: 200px; }
}

/* ============================================================
   [AUTH-SPLIT-CARD] 회원 관련 카드 — PC 2단(이미지+내용) / 모바일 1단
   ------------------------------------------------------------
   로그인 페이지의 .imm-auth-split-page 와는 다르다.
   그건 GNB·푸터를 숨기는 '전체화면' 레이아웃이고, 이건 헤더를 유지한 채
   카드만 가로로 넓히는 방식이다.
   사용: <section class="imm-auth-page imm-auth-wide">
           <div class="imm-auth-card imm-auth-card-split">
             <aside class="imm-auth-visual"><img ...></aside>
             <div class="imm-auth-body"> ... </div>
   ============================================================ */
.imm-auth-page.imm-auth-wide { max-width: 1040px; }

.imm-auth-card-split { padding: 0; overflow: hidden; }

/* 시각 영역 — 모바일에선 숨기고 PC에서만 노출 */
.imm-auth-visual { display: none; }

.imm-auth-body { padding: clamp(28px, 4vw, 48px) clamp(22px, 3.5vw, 44px); }

@media (min-width: 900px) {
  .imm-auth-card-split {
    display: grid;
    grid-template-columns: minmax(280px, 4fr) 6fr;   /* 이미지 : 내용 */
    align-items: stretch;
  }
  .imm-auth-visual {
    display: block; position: relative; overflow: hidden;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border-light);
    min-height: 100%;
  }
  .imm-auth-visual img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  /* 하단에서 올라오는 어두운 그라데이션 + 카피 */
  .imm-auth-visual::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.62) 100%);
  }
  .imm-auth-visual-copy {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    padding: 28px 26px; color: #fff;
  }
  .imm-auth-visual-copy .eyebrow {
    margin: 0 0 6px; font-size: 0.66rem; letter-spacing: 0.18em;
    text-transform: uppercase; opacity: 0.75;
  }
  .imm-auth-visual-copy .title {
    /* ※ var(--font-display, serif) 처럼 serif 폴백을 두면 안 된다.
       변수가 비어 보이는 순간 한글이 윈도우 바탕/궁서로 떨어진다. */
    margin: 0; font-family: var(--font-display);
    font-size: 1.25rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.45;
  }
  /* 2단일 땐 헤더를 좌측 정렬로 — 가운데 정렬은 좁은 카드에서만 어울린다 */
  .imm-auth-card-split .imm-auth-header { text-align: left; }
  .imm-auth-card-split .imm-auth-divider { margin-left: 0; }
}

/* ── 가입 폼 2열 그리드 (PC) — 세로 길이를 줄여 한눈에 들어오게 ── */
.imm-auth-grid { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 900px) {
  .imm-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
    align-items: start;
  }
  .imm-auth-grid .is-full { grid-column: 1 / -1; }   /* 이메일 = 아이디라 한 줄 전체 */
}
/* 도움말이 붙는 필드는 아래 간격을 줄여 행 높이가 들쭉날쭉하지 않게 */
.imm-auth-grid .imm-auth-help { margin-top: 4px; }

/* ── 자동등록방지(kcaptcha) — 기본 마크업이 정렬 없이 흩어져 글자가 겹친다 ── */
.imm-auth-captcha #captcha,
.imm-auth-captcha .captcha {
  border: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.imm-auth-captcha legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.imm-auth-captcha #captcha_img {
  height: 44px; width: auto; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); background: #fff; display: block;
}
.imm-auth-captcha #captcha_key {
  flex: 1 1 120px; min-width: 100px; width: auto; margin: 0;
  height: 44px; padding: 0 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-white); color: var(--color-text); font: inherit;
}
.imm-auth-captcha #captcha_mp3,
.imm-auth-captcha #captcha_reload {
  width: 40px; height: 40px; flex: 0 0 auto; padding: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text-secondary);
  cursor: pointer; font-size: 0; overflow: hidden;
}
.imm-auth-captcha #captcha_mp3:hover,
.imm-auth-captcha #captcha_reload:hover { border-color: var(--color-text-dim); }
.imm-auth-captcha #captcha_info {
  flex: 1 1 100%; margin-top: 2px;
  font-size: 0.74rem; color: var(--color-text-muted); line-height: 1.5;
}

/* ── 가입 폼: 수신동의·캡차까지 2열에 태워 세로 길이를 더 줄인다 (스크롤 방지) ── */
@media (min-width: 900px) {
  /* 카드를 더 넓혀 2열이 답답하지 않게 */
  .imm-auth-page.imm-auth-wide { max-width: 1180px; }
  .imm-auth-card-split { grid-template-columns: minmax(260px, 3.4fr) 6.6fr; }

  .imm-auth-grid > .imm-auth-agree,
  .imm-auth-grid > .imm-auth-captcha { margin: 0; }
  .imm-auth-grid > .imm-auth-agree   { align-self: start; }

  /* 헤더·간격을 조금씩 줄여 한 화면에 들어오게 */
  .imm-auth-card-split .imm-auth-body { padding: 30px 34px 32px; }
  .imm-auth-card-split .imm-auth-header { margin-bottom: 18px; }
  .imm-auth-card-split .imm-auth-form { gap: 16px; }
  .imm-auth-card-split .imm-auth-signup-invite { margin-top: 14px; }
}

/* ── 소셜 가입: 읽기전용 이메일 + '기존 계정 연결' 접이식 ── */
.imm-auth-input.is-locked {
  background: var(--color-surface); color: var(--color-text-secondary); cursor: default;
}
.imm-social-link { margin-top: 18px; border-top: 1px solid var(--color-border-light); padding-top: 16px; }
.imm-social-link > summary {
  cursor: pointer; list-style: none; font-size: 0.82rem; color: var(--color-text-secondary);
  text-decoration: underline; text-underline-offset: 3px;
}
.imm-social-link > summary::-webkit-details-marker { display: none; }
.imm-social-link > summary:hover { color: var(--color-text); }
.imm-social-link[open] > summary { margin-bottom: 12px; font-weight: 600; color: var(--color-text); }
.imm-social-link .imm-auth-form { gap: 14px; margin-top: 12px; }

/* ============================================================
   [MYPAGE] 마이페이지 (theme/immersetime/shop/mypage.php)
   ※ 네이버 로그인 검수 '제공 정보 활용처' 캡처 화면 —
     회원이름과 이메일이 한 화면에 함께 보이도록 상단에 배치한다.
   ============================================================ */
/* ※ 마이페이지는 쇼핑몰 헤더의 .shop-wrap 안에 들어간다.
   .shop-wrap 이 이미 상하 여백(clamp(40px,5vw,80px))을 주고 있어서
   .imm-page 의 padding(고정헤더 높이 + 24px)까지 더해지면 상단이 두 배로 벌어진다.
   → 여기서 .imm-page 여백을 걷어내고 좌우 패딩만 남긴다. */
.shop-wrap .imm-page.imm-mypage,
.imm-mypage {
  max-width: 1040px; margin: 0 auto;
  padding: 0 20px 8px;
  min-height: 0;
}

/* 회원 개요 카드 */
.imm-my-card {
  border: 1px solid var(--color-border); border-radius: 16px;
  background: var(--color-white); padding: 28px; margin-bottom: 28px;
}
.imm-my-id { display: flex; align-items: center; gap: 14px; }
.imm-my-avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  background: var(--color-surface); display: grid; place-items: center; }
.imm-my-avatar img { width: 100%; height: 100%; object-fit: cover; }
.imm-my-id-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.imm-my-name  { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em; }
.imm-my-email { font-size: 0.84rem; color: var(--color-text-secondary); word-break: break-all; }

/* 포인트 · 쿠폰 · 쪽지 */
.imm-my-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 22px 0 20px;
}
.imm-my-stat {
  display: flex; flex-direction: column; gap: 5px; align-items: center;
  padding: 16px 10px; border-radius: 12px; background: var(--color-surface);
  color: inherit; text-decoration: none; transition: var(--transition);
}
.imm-my-stat:hover { background: var(--color-surface-hover); }
.imm-my-stat .k { font-size: 0.74rem; color: var(--color-text-muted); }
.imm-my-stat b  { font-size: 1.18rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.imm-my-stat b em { font-size: 0.74rem; font-weight: 500; font-style: normal; margin-left: 2px; color: var(--color-text-secondary); }

/* 연락처·주소 등 */
.imm-my-info {
  display: grid; grid-template-columns: 88px 1fr; gap: 9px 14px;
  margin: 0 0 22px; padding-top: 20px; border-top: 1px solid var(--color-border-light);
  font-size: 0.85rem;
}
.imm-my-info dt { color: var(--color-text-muted); }
.imm-my-info dd { color: var(--color-text); word-break: break-all; }

.imm-my-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.imm-my-actions .btn { flex: 1 1 auto; min-width: 130px; text-align: center; }

/* 섹션 (주문내역 / 위시) */
.imm-my-sec { margin-bottom: 30px; }
.imm-my-sec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.imm-my-sec-head h2 { font-size: 1.05rem; font-weight: 650; margin: 0; }
.imm-my-more { font-size: 0.8rem; color: var(--color-text-muted); text-decoration: none; }
.imm-my-more:hover { color: var(--color-text); }
.imm-my-empty {
  padding: 34px 16px; text-align: center; font-size: 0.86rem; color: var(--color-text-muted);
  border: 1px dashed var(--color-border); border-radius: 12px;
}

/* 위시리스트 */
.imm-my-wish { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.imm-my-wish-item { display: block; color: inherit; text-decoration: none; }
.imm-my-wish-img {
  display: block; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border-light);
  transition: var(--transition);
}
.imm-my-wish-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.imm-my-wish-item:hover .imm-my-wish-img { border-color: var(--color-text-dim); transform: translateY(-2px); }
.imm-my-wish-name {
  display: block; margin-top: 7px; font-size: 0.8rem; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 영카트 기본 주문내역 표가 테마 폭을 넘지 않게 */
.imm-my-sec .tbl_head01 { width: 100%; }
.imm-my-sec table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }

@media (max-width: 820px) {
  .imm-my-wish  { grid-template-columns: repeat(2, 1fr); }
  .imm-my-card  { padding: 22px 18px; }
  .imm-my-info  { grid-template-columns: 72px 1fr; }
}
@media (max-width: 520px) {
  .imm-my-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   [WELCOME] 회원가입 완료 — 카드 없이 가운데로 흐르는 구성
   ------------------------------------------------------------
   테두리·배경 박스를 두지 않고 여백으로만 구획한다.
   일러스트(assets/ui/welcome.png)가 없으면 스킨이 체크 아이콘으로
   자동 대체하므로 레이아웃은 그대로 유지된다.

   ★ 조절 지점
     · 일러스트 크기      : .imm-welcome-art img 의 max-width
     · 위아래 여백        : .imm-welcome-page 의 padding
     · 필기체 크기/색     : .imm-welcome-find .script
   ============================================================ */
.imm-welcome-page {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) 24px clamp(64px, 10vh, 120px);
  text-align: center;
}

/* ── 일러스트 ── */
.imm-welcome-art {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: clamp(24px, 4vh, 40px);
  color: var(--color-accent-gold);       /* 폴백 아이콘 색 */
}
.imm-welcome-art img {
  display: block; width: 100%; max-width: 320px; height: auto;
}

/* ── 인사 ── */
.imm-welcome-eyebrow {
  margin: 0 0 14px;
  font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.imm-welcome-title {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 2.35rem);
  font-weight: 600; line-height: 1.4; letter-spacing: -0.02em;
  color: var(--color-text);
}
.imm-welcome-title em {
  font-style: normal;
  color: var(--color-accent-gold);
}
.imm-welcome-msg {
  margin: 18px 0 0;
  font-size: 0.95rem; line-height: 1.9;
  color: var(--color-text-secondary);
}

/* ── 혜택 한 줄 ── */
.imm-welcome-perk {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 30px 0 0; padding: 9px 16px;
  border: 1px solid rgba(184, 150, 12, 0.3);
  border-radius: 999px;
  font-size: 0.82rem; color: var(--color-text-secondary);
}
.imm-welcome-perk .tag {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent-gold);
}
.imm-welcome-perk strong { color: var(--color-text); font-weight: 700; }

/* ── 이메일 인증 안내 (쓰는 경우에만) ── */
.imm-welcome-certify {
  margin: 30px 0 0; padding: 18px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
}
.imm-welcome-certify p { margin: 0; font-size: 0.84rem; line-height: 1.75; color: var(--color-text-secondary); }
.imm-welcome-certify .addr { margin-top: 8px; font-weight: 600; color: var(--color-text); }

/* ── 주 버튼 ── */
.imm-welcome-cta { margin-top: clamp(32px, 5vh, 46px); }
.imm-welcome-cta .btn {
  min-width: 240px; padding: 16px 34px;
  font-size: 0.86rem; letter-spacing: 0.04em;
}

/* ── 필기체 보조 버튼 ──
   영문만 Parisienne, 한글 라벨은 본문 폰트를 그대로 쓴다.
   (한글에 필기체를 씌우면 시스템 폰트로 떨어져 톤이 무너진다) */
.imm-welcome-find {
  display: inline-block;
  margin-top: clamp(26px, 4vh, 38px);
  padding: 4px 6px;
  text-decoration: none;
  transition: transform .25s ease;
}
.imm-welcome-find:hover { transform: translateY(-2px); }
.imm-welcome-find .script {
  display: block;
  font-family: 'Parisienne', cursive;
  font-size: clamp(1.9rem, 5.5vw, 2.5rem);
  line-height: 1.15;
  color: var(--color-accent-gold);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 50% 96%;
  background-size: 0% 1px;                 /* 호버 시 밑줄이 가운데서 번진다 */
  transition: background-size .45s cubic-bezier(.22,.61,.36,1);
}
.imm-welcome-find:hover .script { background-size: 100% 1px; }
.imm-welcome-find .label {
  display: block; margin-top: 6px;
  font-size: 0.74rem; letter-spacing: 0.16em;
  color: var(--color-text-muted);
}
.imm-welcome-find:hover .label { color: var(--color-text-secondary); }

/* ── 보조 링크 ── */
.imm-welcome-more {
  margin: clamp(30px, 5vh, 44px) 0 0;
  font-size: 0.76rem; color: var(--color-text-muted);
}
.imm-welcome-more a { color: var(--color-text-muted); }
.imm-welcome-more a:hover { color: var(--color-text); text-decoration: underline; }
.imm-welcome-more .sep { margin: 0 10px; opacity: 0.45; }

@media (max-width: 480px) {
  .imm-welcome-art img { max-width: 240px; }
  .imm-welcome-cta .btn { min-width: 0; width: 100%; }
}

/* ============================================================
   [WELCOME-WATCH] 가입 완료 아이콘 — 체크와 시계바늘이 번갈아
   ------------------------------------------------------------
   한 사이클(--w-dur = 8s) 동안 두 단계가 이어진다.

   1단계 · 체크
     0~4%    체크 정지
     4~24%   시계 방향으로 한 바퀴 회전 후 감속하며 안착
     26~40%  녹색으로 세 번 깜빡임
     40~45%  사라짐

   2단계 · 바늘
     45~49%  나타남 (10시 10분에서 출발)
     49~72%  시침·분침이 각각 한 바퀴 회전
     72~76%  10시 10분(체크 방향)에 안착
     76~94%  정지 상태로 머무름
     94~100% 사라지고 체크가 돌아옴 → 반복

   각도 (12시 = 0deg)
     · 분침 :10  →  60deg → 420deg  (한 바퀴 + 60)
     · 시침 10:10 → 305deg → 665deg (한 바퀴 + 305)
     360 으로 나눈 나머지가 시작값과 같아 루프가 튀지 않는다.

   ★ 속도 조절: .imm-watch 의 --w-dur 한 곳만 바꾸면 전부 따라간다.
   ============================================================ */
.imm-watch {
  --w-dur: 8s;
  --w-gold: var(--color-accent-gold);
  --w-green: #1FA85C;
  color: var(--w-gold);
  animation: immWatchTint var(--w-dur) linear infinite;
}
.imm-watch-rim   { opacity: 0.5; }
.imm-watch-ticks { opacity: 0.32; }

.imm-watch-check,
.imm-watch-hand,
.imm-watch-pin {
  transform-box: view-box;
  transform-origin: 24px 24px;
  animation-duration: var(--w-dur);
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.16, 0.85, 0.22, 1);  /* 브레이크 걸리듯 감속 */
}
.imm-watch-check { animation-name: immWatchCheck; }
.imm-watch-hour  { animation-name: immWatchHour; }
.imm-watch-min   { animation-name: immWatchMin; }
.imm-watch-pin   { animation-name: immWatchPin; animation-timing-function: linear; }

/* 1단계 — 체크가 한 바퀴 돌고 멈춘 뒤 사라진다 */
@keyframes immWatchCheck {
  0%,  4%  { transform: rotate(0deg);   opacity: 1; }
  24%      { transform: rotate(360deg); opacity: 1; }
  40%      { transform: rotate(360deg); opacity: 1; }
  45%, 94% { transform: rotate(360deg); opacity: 0; }
  100%     { transform: rotate(0deg);   opacity: 1; }
}

/* 2단계 — 바늘이 나타나 한 바퀴 돌고 10시 10분에 선다 */
@keyframes immWatchHour {
  0%,  45% { transform: rotate(305deg); opacity: 0; }
  49%      { transform: rotate(305deg); opacity: 1; }
  76%      { transform: rotate(665deg); opacity: 1; }   /* 한 바퀴 + 305 */
  94%      { transform: rotate(665deg); opacity: 1; }
  100%     { transform: rotate(665deg); opacity: 0; }
}
@keyframes immWatchMin {
  0%,  45% { transform: rotate(60deg);  opacity: 0; }
  49%      { transform: rotate(60deg);  opacity: 1; }
  76%      { transform: rotate(420deg); opacity: 1; }   /* 한 바퀴 + 60 */
  94%      { transform: rotate(420deg); opacity: 1; }
  100%     { transform: rotate(420deg); opacity: 0; }
}
/* 중심핀은 바늘이 있을 때만 보인다 */
@keyframes immWatchPin {
  0%,  45% { opacity: 0; }
  49%, 94% { opacity: 1; }
  100%     { opacity: 0; }
}

/* 체크가 멈춘 직후 녹색 점멸 (색은 svg 전체에 상속된다) */
@keyframes immWatchTint {
  0%,  25% { color: var(--w-gold);  filter: none; }
  28%      { color: var(--w-green); filter: drop-shadow(0 0 6px rgba(31,168,92,0.55)); }
  31%      { color: var(--w-gold);  filter: none; }
  34%      { color: var(--w-green); filter: drop-shadow(0 0 6px rgba(31,168,92,0.55)); }
  37%      { color: var(--w-gold);  filter: none; }
  40%      { color: var(--w-green); filter: drop-shadow(0 0 9px rgba(31,168,92,0.7)); }
  44%, 100%{ color: var(--w-gold);  filter: none; }
}

/* ── 혜택 알약 — 깜빡임 대신 금빛이 한 번씩 훑고 지나간다 ──
   ★ 그냥 깜빡이게 하려면 ::after 의 shimmer 를 지우고
     .imm-welcome-perk 에 animation: immPerkBreath 1.4s ease-in-out infinite; 만 남기면 된다. */
.imm-welcome-perk {
  position: relative;
  overflow: hidden;
  animation: immPerkBreath 3.6s ease-in-out infinite;
}
.imm-welcome-perk::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 55%;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255, 236, 176, 0.75) 45%,
    rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: immPerkShine 3.6s ease-in-out infinite;
}
@keyframes immPerkShine {
  0%, 55%  { left: -60%; opacity: 0; }
  60%      { opacity: 1; }
  92%      { left: 105%; opacity: 0; }
  100%     { left: 105%; opacity: 0; }
}
@keyframes immPerkBreath {
  0%, 100% { border-color: rgba(184, 150, 12, 0.30); box-shadow: 0 0 0 rgba(184,150,12,0); }
  55%      { border-color: rgba(184, 150, 12, 0.62); box-shadow: 0 0 14px rgba(184,150,12,0.20); }
}

/* 모션 최소화 설정 — 전부 정지하고 체크만 보여준다 */
@media (prefers-reduced-motion: reduce) {
  .imm-watch, .imm-watch-check, .imm-watch-hand, .imm-watch-pin,
  .imm-welcome-perk, .imm-welcome-perk::after { animation: none; }
  .imm-watch-hand, .imm-watch-pin { opacity: 0; }
  .imm-welcome-perk::after { display: none; }
}