/* ============================================================
   [ENGRAVE] 각인 — 입력 패널([이미지+각인] 카드) + 메인시계 전면 오버레이
   IMM_ENGRAVE 가 켜졌을 때만 로드된다(head.sub.php).
   ============================================================ */

/* ---------- 오른쪽 입력 패널 (주문 폼과 동일 열) ---------- */
.imm-engrave-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 16px 16px 18px;
  position: sticky;
  top: calc(var(--gnb-height) + 12px);
  max-height: calc(100vh - var(--gnb-height) - 90px);
  overflow: auto;
}
.imm-engrave-panel[hidden] { display: none; }

.imm-engrave-intro {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--color-border-light);
}
.imm-engrave-intro h3 { font-size: 1.02rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
/* 현재 각인 추가금 배지 — 0원이면 '각인 무료', 유료면 강조 */
.imm-engrave-intro .ime-fee-badge {
  font-size: 0.68rem; letter-spacing: 0.04em; color: #12b98a;
  border: 1px solid currentColor; border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.imm-engrave-intro .ime-fee-badge.is-paid { color: #B8960C; font-weight: 600; }
.imm-engrave-intro p { width: 100%; margin: 3px 0 0; font-size: 0.82rem; line-height: 1.55; color: var(--color-text-secondary); }

/* ---------- 슬롯 카드 (전면/측면) ---------- */
.ime-slot {
  border: 1px solid var(--color-border-light);
  border-radius: 14px; padding: 13px; background: var(--color-surface);
  transition: var(--transition);
}
.ime-slot.is-filled { border-color: var(--color-accent, #3FE0B0); }
.ime-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ime-slot-label { font-size: 0.92rem; font-weight: 600; }
.ime-slot-pos { font-size: 0.7rem; color: var(--color-text-secondary); letter-spacing: 0.02em; }

/* ---------- 미리보기 스테이지 ([이미지 + 각인]) ---------- */
.ime-stage {
  position: relative; aspect-ratio: 4 / 3; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--color-border-light);
  background: linear-gradient(180deg, #f4f5f7, #e9ebee);
  margin-bottom: 11px;
}
.ime-stage-media { position: absolute; inset: 0; background-repeat: no-repeat; }
/* 전면 = 선택 다이얼의 하부-중앙(각인 영역)을 확대 프레이밍. 스테이지는 낮게(약 절반 높이). */
.ime-stage[data-stage="front"] {
  aspect-ratio: 11 / 5;        /* 5/2 보다 약간 높게(+약 20px) → 다이얼이 그만큼 더 보임 */
  --front-zoom: 185%;          /* 확대율 (값 ↑ = 더 확대) */
  --front-pos: 50% 42%;        /* 세로 프레이밍: 값 ↑ = 다이얼(이미지)이 위로 올라감 */
  /* ★ 여기는 '다이얼 중심' 위치만 잡는다. 중심에서 얼마나 위로 갈지는 engrave.js 담당.
     (--front-pos 42% · 확대 185% · 스테이지 비율 11/5 로부터 계산된 값)
     --front-pos 를 바꾸면 이 값도 다시 계산해야 완성시계 미리보기와 어긋나지 않는다. */
  --front-eng-top: 74.6%;
}
.ime-stage[data-stage="front"] .ime-stage-media {
  background-size: var(--front-zoom, 185%);
  background-position: var(--front-pos, 50% 42%);
}
/* 하단 = 전면과 동일 프레이밍을 다이얼 중심(50%) 대칭으로 뒤집어 6시 밴드를 확대. 전면과 같은 시스템/비율. */
.ime-stage[data-stage="lower"] {
  aspect-ratio: 11 / 5;
  --front-zoom: 185%;
  --lower-pos: 50% 58%;        /* 전면 --front-pos(42%) 의 중심(50%) 대칭 → 6시측 밴드 */
  --lower-eng-top: 25.4%;      /* 이 크롭에서의 다이얼 중심 (전면 74.6% 의 대칭) */
}
.ime-stage[data-stage="lower"] .ime-stage-media {
  background-size: var(--front-zoom, 185%);
  background-position: var(--lower-pos, 50% 58%);
}
/* 측면 = watch_side.png (960×280, 3.43:1) 전체 표시. 각인은 가운데 브러시드 밴드에 */
.ime-stage[data-stage="side"] {
  aspect-ratio: 960 / 280;
  background: linear-gradient(180deg, #eceef1, #dfe2e6);
  /* 브러시드 밴드 세로 위치 (값 ↑ = 아래로).
     watch_side.png 기준 케이스는 30~253행/280 = 세로중심 50.5%.
     각인은 베젤 아래 브러시드 밴드에 앉아야 해서 중심보다 아래로 둔다.
     각인 텍스트와 안내문(.ime-stage-empty)이 이 값을 공유한다. */
  --side-eng-top: 54.5%;
  --side-eng-left: 50%;
}
.ime-stage[data-stage="side"] .ime-stage-media { background-size: contain; background-position: center; }
.ime-stage.no-img { background: repeating-linear-gradient(45deg, #eef0f2, #eef0f2 10px, #e6e8eb 10px, #e6e8eb 20px); }
.ime-stage.no-img .ime-stage-media { display: none; }

.ime-stage-empty {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  font-size: 0.72rem; color: #7c828b; opacity: 0.85; pointer-events: none; white-space: nowrap;
}
.ime-slot.is-filled .ime-stage-empty { display: none; }
/* 측면은 안내문도 '실제 각인이 찍힐 자리'에 둔다 — 어디에 새겨지는지 바로 보이도록.
   각인 텍스트(.imm-eng-text)와 같은 --side-eng-top 을 쓰므로 둘이 항상 같은 높이. */
.ime-stage[data-stage="side"] .ime-stage-empty {
  top: var(--side-eng-top, 53%);
  bottom: auto;
  transform: translate(-50%, -50%);
}

/* ---------- 입력 ---------- */
.ime-input-wrap { position: relative; }
.ime-input {
  width: 100%; font-size: 0.95rem; letter-spacing: 0.08em;
  padding: 10px 50px 10px 12px; border: 1px solid var(--color-border);
  border-radius: 10px; background: var(--color-white); text-transform: uppercase; transition: var(--transition);
}
.ime-input:focus { outline: none; border-color: var(--color-accent, #3FE0B0); }
.ime-count {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-size: 0.7rem; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; pointer-events: none;
}

/* ---------- 각인 방식 선택 (로고 프리셋 4종 / 없음 / 직접입력) ---------- */
.ime-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.ime-mode-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; padding: 8px 8px;
  font: inherit; font-size: 0.74rem; letter-spacing: 0.01em; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: 9px;
  background: var(--color-white); color: var(--color-text-secondary); transition: var(--transition);
}
.ime-mode-btn:hover { border-color: #3FE0B0; color: var(--color-text); }
.ime-mode-btn.is-active {
  border-color: #1A1A1A; background: #1A1A1A; color: #fff; font-weight: 600;
}
.ime-mode-name { display: flex; flex-direction: column; align-items: center; line-height: 1.25; text-align: center; }
.ime-mode-name em { font-style: normal; font-size: 0.62rem; opacity: 0.7; font-weight: 400; }
.ime-mode-fee { font-size: 0.62rem; opacity: 0.65; font-variant-numeric: tabular-nums; }
.ime-mode-fee.is-paid { color: #B8960C; opacity: 1; font-weight: 600; }
.ime-mode-btn.is-active .ime-mode-fee.is-paid { color: #E8C65A; }

/* 프리셋 버튼 안 로고 썸네일 — 밝은 버튼 배경에선 어둡게, 선택(검정) 상태에선 원본 은박 그대로.
   .is-stack(메인 로고) 은 심볼 위 · 텍스트 아래로, 실제 각인 모양대로 보여준다. */
/* 프리셋 버튼은 로고 이미지만 (이름 라벨 없음) → 썸네일에 높이를 더 준다 */
.ime-mode-btn.is-preset { padding: 10px 10px; }
.ime-mode-img {
  width: 100%; height: 36px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.ime-mode-img img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  filter: brightness(0.45) contrast(1.15);
  transition: filter var(--transition);
}
.ime-mode-img.is-stack img:first-child { max-height: 58%; }
.ime-mode-img.is-stack img:last-child  { max-height: 32%; }
.ime-mode-btn.is-active .ime-mode-img img { filter: none; }

.ime-input-wrap[hidden] { display: none; }

/* ---------- 직접입력 전용 옵션 (글씨체 4종 / 크기 3단계) ---------- */
.ime-custom-opt { margin-top: 10px; }
.ime-custom-opt[hidden] { display: none; }
.ime-opt-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 7px; }
.ime-opt-label {
  flex: 0 0 40px; padding-top: 6px;
  font-size: 0.72rem; color: var(--color-text-secondary); letter-spacing: 0.02em;
}
.ime-opt-btns { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.ime-opt-btn {
  flex: 1 1 auto; min-width: 54px; padding: 6px 8px;
  font: inherit; font-size: 0.76rem; line-height: 1.25; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--color-border); border-radius: 7px;
  background: var(--color-white); color: var(--color-text-secondary); transition: var(--transition);
}
.ime-opt-btn em { display: block; font-style: normal; font-size: 0.62rem; opacity: 0.65; }
.ime-opt-btn:hover { border-color: #3FE0B0; color: var(--color-text); }
.ime-opt-btn.is-active { border-color: #1A1A1A; background: #1A1A1A; color: #fff; }
.ime-opt-note {
  margin: 8px 0 0; font-size: 0.7rem; color: var(--color-text-muted); line-height: 1.5;
}

/* ============================================================
   로고 각인 = 은박 볼록 스티커. 텍스트 음각과 달리 이미지를 그대로 얹고
   가장자리에 얇은 하이라이트/그림자만 줘서 '볼록하게 붙은' 느낌을 만든다.
   위치·크기는 텍스트 각인과 완전히 같은 좌표계 (engrave.js 가 width 지정).
   ============================================================ */
.imm-eng-img {
  position: absolute; left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  /* 레이어 스택 컨테이너 — 크기(width/height/gap)와 각 레이어 px 는 engrave.js 가 지정.
     메인 로고처럼 2장이면 위(심볼) → 아래(텍스트) 순으로 쌓인다. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  filter:
    drop-shadow(0 1px 0.5px rgba(255, 255, 255, 0.55))
    drop-shadow(0 -0.5px 0.5px rgba(0, 0, 0, 0.4));
}
.imm-eng-img > img { display: block; object-fit: contain; }
.imm-eng-img.on { opacity: 1; }
/* 밝은 다이얼에 은박 로고 → 그대로면 묻히므로 대비 보정 (_dark.png 를 넣으면 이 클래스가 안 붙음) */
.imm-eng-img.is-onlight { filter: brightness(0.5) contrast(1.25) drop-shadow(0 0.5px 0.5px rgba(255,255,255,0.5)); }

.ime-stage[data-stage="front"] .imm-eng-img { top: var(--front-eng-top, 30%); }
.ime-stage[data-stage="lower"] .imm-eng-img { top: var(--lower-eng-top, 40%); }
.ime-stage[data-stage="side"]  .imm-eng-img { top: var(--side-eng-top, 50%); left: var(--side-eng-left, 50%); }

/* ---------- 소비자 안내 문구 (항상 노출 2줄 + 접이식 전문) ---------- */
.ime-notice {
  font-size: 0.75rem; line-height: 1.55; color: var(--color-text-secondary);
  background: var(--color-surface); border: 1px dashed var(--color-border);
  border-radius: 10px; padding: 10px 12px;
}
.ime-notice-line { margin: 0 0 5px; padding-left: 9px; position: relative; }
.ime-notice-line:last-of-type { margin-bottom: 0; }
.ime-notice-line::before { content: ''; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.55; }

/* 전체 보기 토글 */
.ime-notice-toggle {
  display: flex; align-items: center; gap: 4px; margin-top: 9px; padding: 0;
  font: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer;
  background: none; border: none; color: var(--color-text); text-decoration: underline; text-underline-offset: 3px;
}
.ime-notice-toggle svg { transition: transform var(--transition); }
.ime-notice-toggle.is-open svg { transform: rotate(180deg); }
.ime-notice-toggle:hover { color: var(--color-accent); }

/* 펼친 전문 */
.ime-notice-full { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border); }
.ime-notice-full[hidden] { display: none; }
.ime-notice-sec + .ime-notice-sec { margin-top: 11px; }
.ime-notice-sec h4 {
  display: flex; align-items: center; gap: 5px; margin: 0 0 5px;
  font-size: 0.76rem; font-weight: 650; color: var(--color-text);
}
.ime-notice-sec ul { margin: 0; padding: 0; list-style: none; }
.ime-notice-sec li { position: relative; padding-left: 9px; margin-bottom: 3px; }
.ime-notice-sec li::before { content: ''; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.55; }

/* ---------- 주문 단계 · 결제 직전 압축 안내 ---------- */
.imm-order-notice {
  margin-top: 4px; padding: 11px 13px;
  background: rgba(184, 150, 12, 0.07); border: 1px solid rgba(184, 150, 12, 0.3);
  border-radius: 11px; font-size: 0.75rem; line-height: 1.55; color: var(--color-text-secondary);
}
.imm-order-notice[hidden] { display: none; }
.imm-order-notice-t {
  display: flex; align-items: center; gap: 5px; margin-bottom: 6px;
  font-size: 0.78rem; font-weight: 650; color: #8A6A1E;
}
.imm-order-notice ul { margin: 0; padding: 0; list-style: none; }
.imm-order-notice li { position: relative; padding-left: 9px; margin-bottom: 3px; }
.imm-order-notice li:last-child { margin-bottom: 0; }
.imm-order-notice li::before { content: ''; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.55; }

/* ============================================================
   각인 텍스트 효과 — 음각(deboss) + 레이킹 라이트(::after 글린트)
   패널 스테이지 안에서 사용. 색 톤은 JS 가 tone-light/tone-dark 부여.
   ============================================================ */
.imm-eng-text {
  position: absolute; left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  /* 기획서: "모두 자간은 좁게" — 직접입력 각인은 자간을 좁혀 인쇄한다 */
  white-space: nowrap; font-weight: 700; letter-spacing: -0.02em;
  font-family: var(--font-display, 'Pretendard', sans-serif);
  font-size: 16px;                 /* 크기는 JS 가 단계(8/9/10pt) 기준으로 설정 */
  pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  /* 음각(deboss): 어두운 글씨 + 위 그림자 / 아래 립 하이라이트 → 표면에 '파인' 느낌 (테두리 아님) */
  color: rgba(36, 39, 45, 0.95);
  text-shadow:
    0 -1px 1px rgba(0,0,0,0.4),           /* 위 안쪽 그림자 */
    0 1px 0   rgba(255,255,255,0.95),      /* 아래 립 하이라이트 = 빛 걸림 */
    0 2px 1px rgba(255,255,255,0.55);
}
.imm-eng-text.on { opacity: 1; }
.ime-stage[data-stage="front"] .imm-eng-text { top: var(--front-eng-top, 30%); }
.ime-stage[data-stage="lower"] .imm-eng-text { top: var(--lower-eng-top, 40%); }
.ime-stage[data-stage="side"]  .imm-eng-text { top: var(--side-eng-top, 50%); left: var(--side-eng-left, 50%); }
/* 밝은 표면(은색 케이스 등) — 기본 음각 톤 */
.imm-eng-text.tone-light, .imm-eng-text.tone-dark { color: rgba(36, 39, 45, 0.95); }
/* 어두운 케이스 — 레이저 음각도 어둡게 (기획서: "검은색 케이스면 검은색") */
.imm-eng-text.tone-deep {
  color: rgba(14, 16, 20, 0.96);
  text-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.75),
    0 2px 1px rgba(255, 255, 255, 0.4);
}

/* ============================================================
   메인 조립 시계 — 전면 각인만 다이얼 위에 은은하게 (측면은 패널 전용)
   #watch-preview 내부라 줌/팬과 함께 변형됨.
   ============================================================ */
/* 각인/주문 단계(#watch-preview.show-engrave)에서만 노출 — 부품 조립 전 단계엔 각인 미표시 */
#watch-preview:not(.show-engrave) .imm-engrave-overlay { display: none; }
.imm-engrave-overlay {
  position: absolute; inset: 0; pointer-events: none;
  z-index: 1;                 /* 다이얼(face·auto) 위 · 핸즈(2)·크리스탈(4)·베젤(6) 아래 → 각인이 시침/분침/초침 밑으로 */
  /* ★ 여기는 '다이얼 중심' 위치만 잡는다. 중심에서 얼마나 벗어날지는 engrave.js 의
     ENG_BASE / ENG_SHIFT 가 px 로 계산해 얹는다 (패널 썸네일과 자동으로 일치).
     각인을 위/아래로 옮기고 싶으면 이 값이 아니라 engrave.js 를 수정할 것. */
  --ime-front-top: 50%;
  --ime-lower-top: 50%;
}
.imm-engrave-overlay .ime-front,
.imm-engrave-overlay .ime-lower {
  position: absolute; left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  font-family: var(--font-display, 'Pretendard', sans-serif);
  font-size: clamp(7px, 4.2%, 22px);
  opacity: 0; transition: opacity 0.35s ease;
}
.imm-engrave-overlay .ime-front { top: var(--ime-front-top); }
.imm-engrave-overlay .ime-lower { top: var(--ime-lower-top); }
/* 로고 스티커 — 텍스트 각인과 동일한 위치 좌표계 (크기는 engrave.js 가 다이얼 지름 기준으로 지정) */
.imm-engrave-overlay .ime-front-img { top: var(--ime-front-top); }
.imm-engrave-overlay .ime-lower-img { top: var(--ime-lower-top); }
.imm-engrave-overlay .ime-front.on,
.imm-engrave-overlay .ime-lower.on { opacity: 1; }
.imm-engrave-overlay .ime-front.tone-light,
.imm-engrave-overlay .ime-front.tone-dark,
.imm-engrave-overlay .ime-lower.tone-light,
.imm-engrave-overlay .ime-lower.tone-dark {
  /* 금속에 파인 각인: 반투명 짙은 회색 홈(다이얼 질감이 비침) + 아래 립 하이라이트/위 안쪽 그림자.
     완성 미리보기는 작게 표시되므로 오프셋을 sub-px 로 촘촘히 → 이중상 없이 '음각' 느낌만. */
  color: rgba(58, 64, 72, 0.7);
  text-shadow:
    0 1px 0.5px rgba(255, 255, 255, 0.9),
    0 -0.5px 0.5px rgba(0, 0, 0, 0.35);
}
/* 메인 완성 시계는 표시 크기가 작아 레이킹 라이트(대각선 광택)가 이중상처럼 보임 → 미적용.
   빛 스침 효과는 크게 보이는 패널 미리보기(.imm-eng-text)에만 유지한다. */

/* 주문 요약(recap)의 각인 행 */
.recap-row.recap-engrave .recap-name { letter-spacing: 0.06em; }
.recap-row.recap-engrave .recap-name em { font-style: normal; color: #B8960C; font-weight: 600; margin-left: 4px; }

/* ============================================================
   [PRINT] 다이얼 직접입력 = 금황동색 인쇄 (기획서: 색상 변경 불가)
   음각(deboss)이 아니라 표면에 '얹힌 금색 인쇄'라 그림자를 걷어내고
   금속 금색 그라데이션 + 아주 얇은 립 하이라이트만 준다.
   색을 바꾸려면 --ime-gold 3개 값만 조절할 것.
   ※ 케이스 측면(.is-printed 없음)은 기존 음각 표현 유지 — 인쇄가 아니라 각인이므로.
   ============================================================ */
.ime-stage .imm-eng-text.is-printed,
.imm-eng-text.is-printed {
  --ime-gold-hi:  #E3C275;
  --ime-gold:     #B8912F;
  --ime-gold-low: #8A6A1E;
  text-transform: none;                    /* 한글·소문자 입력 그대로 인쇄 */
  color: var(--ime-gold);
  background: linear-gradient(178deg, var(--ime-gold-hi) 8%, var(--ime-gold) 48%, var(--ime-gold-low) 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0.5px 0.5px rgba(255, 255, 255, 0.55));
}
/* 음각용 레이킹 라이트는 인쇄엔 어울리지 않음 — 끔 */
.ime-stage .imm-eng-text.is-printed::after,
.imm-eng-text.is-printed::after { display: none; }
.imm-engrave-overlay .ime-front.is-printed,
.imm-engrave-overlay .ime-lower.is-printed {
  color: var(--ime-gold, #B8912F);
  background: linear-gradient(178deg, #E3C275 8%, #B8912F 48%, #8A6A1E 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  text-transform: none;
  letter-spacing: -0.02em;
}

/* 레이킹 라이트 — 빛이 각인 위를 스치며 홈이 번쩍 (읽힘 유지) */
.imm-eng-text::after {
  content: attr(data-text); position: absolute; inset: 0; letter-spacing: inherit; font-weight: inherit;
  background: linear-gradient(100deg, transparent 44%, rgba(255,255,255,0.9) 50%, transparent 56%);
  background-size: 300% 100%; background-position: 150% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .imm-eng-text.on::after { opacity: 1; animation: imm-rake 3.6s linear infinite; }
  .ime-stage[data-stage="side"] .imm-eng-text.on::after { animation-duration: 2.6s; }  /* 스틸은 더 빠르게 */
}
@keyframes imm-rake { from { background-position: 150% 0; } to { background-position: -100% 0; } }

/* ============================================================
   [PRINT] 케이스 측면 직접입력 = 표면에 얹힌 '인쇄'
   ------------------------------------------------------------
   파고든 음각(deboss)이 아니다 → 위/아래 그림자 쌍(text-shadow)을 전부 걷어낸다.
   색은 실버 기반에 아주 살짝 금색이 도는 톤. 브러시드 스틸 위에서 읽히도록
   아주 얇은 대비 그림자 하나만 남긴다(음영이 아니라 인쇄물의 가장자리 느낌).
   색을 조절하려면 --ime-side-ink 하나만 만지면 된다.
   ※ 톤 클래스(tone-*)보다 뒤에 와야 색이 안 밀리므로 파일 끝에 둔다.
   ============================================================ */
.ime-stage .imm-eng-text.is-side-print,
.imm-eng-text.is-side-print {
  --ime-side-ink: #F0E9D8;          /* 실버 + 아주 옅은 금색 */
  color: var(--ime-side-ink);
  -webkit-text-fill-color: var(--ime-side-ink);
  background: none;
  text-shadow: 0 0.5px 1px rgba(70, 58, 30, 0.30);
  text-transform: none;
  font-weight: 600;                 /* 인쇄물이라 각인보다 살짝 가볍게 */
}
/* 음각용 레이킹 라이트(대각선 광택) 제거 — 인쇄엔 안 어울림 */
.ime-stage .imm-eng-text.is-side-print::after,
.imm-eng-text.is-side-print::after { display: none; }

/* ============================================================
   [LAYOUT] 각인 단계 — 좌: 위치 목록 / 우: 선택한 위치 편집
   부품 선택 단계의 .imm-opt 행 구조를 재사용해 조작법을 통일한다.
   ============================================================ */
.imm-opt.ime-row { align-items: center; }
.imm-opt.ime-row .imm-opt-thumb {
  background: var(--color-white); border: 1px solid var(--color-border-light);
  padding: 4px; overflow: hidden;
}
.ime-row-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; gap: 1px; }
.ime-row-label { font-size: 0.86rem; font-weight: 600; }
.ime-row-val {
  font-size: 0.72rem; color: var(--color-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.imm-opt.ime-row.is-set .ime-row-val { color: var(--color-text-secondary); }
.ime-row-fee {
  margin-left: auto; flex: 0 0 auto; font-size: 0.72rem; color: var(--color-text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ime-row-fee.is-paid { color: #B8960C; font-weight: 650; }

/* 행 썸네일 — 로고 / 직접입력 문구 / 없음 */
.ime-row-logo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; height: 100%; }
.ime-row-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: brightness(0.45) contrast(1.15); }
.ime-row-logo.is-stack img:first-child { max-height: 58%; }
.ime-row-logo.is-stack img:last-child  { max-height: 32%; }
.ime-row-txt {
  font-size: 0.52rem; font-weight: 700; letter-spacing: -0.02em; color: #8A6A1E;
  line-height: 1.1; text-align: center; word-break: break-all; padding: 0 1px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ime-row-none { color: var(--color-text-dim); font-size: 0.9rem; }

/* 목록 하단 안내문 — 행들과 붙지 않게 여백 */
.imm-list .ime-notice { margin-top: 6px; }

/* 편집 패널은 이제 한 곳만 담으므로 카드 테두리를 덜어내 여백을 준다 */
.imm-engrave-panel .ime-slot { border: none; background: none; padding: 0; }
.imm-engrave-panel .ime-slot.is-filled { border: none; }