/* ============================================================================
 * endedit 정적군(공지·약관·이벤트·고객센터·FAQ·1:1문의·판매자입점·제휴문의)
 * — 탈React 정적 프로토타입 CSS
 * 원본 그대로 합친 것 (내용 변경 없음, 순서만 토큰→전역 최소셸→화면):
 *   src/styles/tokens.css          (디자인 토큰 --wds-*)
 *   src/shop/static/static.css      (10화면 전체, 값 1:1 그대로)
 * + 맨 아래에 이 프로토타입 전용 헤더/푸터/컨테이너 placeholder만 추가.
 * ⚠️ .sh-wrap/.sh-pad-doc/.chip-scroll 등 global.css·shared/chrome.css 유래
 *    클래스는 이번 조사 범위 밖이라(다른 화면 프로토타입도 동일) 합리적으로
 *    추정한 값만 넣었다 — 실배포 전 원본 값과 대조 필요(리스크로 별도 보고).
 * ========================================================================= */

/* ── tokens.css (order 프로토타입과 동일한 값, 재검증 완료분 재사용) ── */
:root {
  --wds-primary: #ff5c28;
  --wds-primary-strong: #f04d1a;
  --wds-primary-heavy: #d63f10;
  --wds-primary-tint: #fff4f0;

  --wds-text: rgb(23, 23, 23);
  --wds-text-neutral: rgba(46, 47, 51, 0.88);
  --wds-text-alt: rgba(55, 56, 60, 0.61);
  --wds-text-assistive: rgba(55, 56, 60, 0.28);
  --wds-inactive: rgba(55, 56, 60, 0.61);

  --wds-fill: rgba(112, 115, 124, 0.05);
  --wds-fill-strong: rgba(112, 115, 124, 0.16);
  --wds-line: rgba(112, 115, 124, 0.16);
  --wds-line-alt: rgba(112, 115, 124, 0.08);
  --wds-line-neutral: rgba(112, 115, 124, 0.16);

  --wds-surface: #fff;
  --wds-surface-alt: rgb(247, 247, 248);
  --wds-surface-inverse: rgb(23, 23, 25);

  --wds-cautionary: rgb(255, 146, 0);
  --wds-destructive: rgb(255, 66, 66);

  --wds-elev-inset-line: inset 0 0 0 1px rgba(112, 115, 124, 0.08);
  --wds-elev-popover: 0 0 60px rgba(23, 23, 23, 0.1);

  --wds-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;

  --font-core: 'Pretendard JP', 'Pretendard Variable', Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, 'Malgun Gothic', sans-serif;

  --layout-header-max: 1440px;
  --layout-body-max: 1200px;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--wds-surface); font-family: var(--font-core); color: var(--wds-text); }
button { font-family: var(--font-core); }
a { color: inherit; }

/* ── 최소 셸 placeholder (global.css/chrome.css 원본 미확보 — 리스크 보고 참고) ── */
.sh-wrap { max-width: var(--layout-body-max); margin: 0 auto; padding: 0 20px; }
.sh-pad-doc { padding-top: 28px; padding-bottom: 80px; }  /* 2026-08-23 : 타이틀이 탑메뉴에 붙어 있어 위 여백을 넣었다(상품상세·마이페이지와 같은 계열 값) */
.chip-scroll { display: flex; overflow-x: auto; scrollbar-width: none; }
.chip-scroll::-webkit-scrollbar { display: none; }
.sh-page-err, .sh-page-hold { max-width: var(--layout-body-max); margin: 0 auto; padding: 120px 20px; text-align: center; color: var(--wds-text-alt); }

/* ── static.css (원본 그대로, 값 변경 없음) ── */
.ee-st-head { display: flex; align-items: center; gap: 8px; height: 32px; box-sizing: content-box; padding-bottom: 12px; box-shadow: inset 0 -1px 0 var(--wds-text); }
.ee-st-back { flex: none; width: 32px; height: 32px; margin-left: -6px; display: grid; place-items: center; color: var(--wds-text); }
.ee-st-title { flex: 1; margin: 0; font-size: 19px; line-height: 28px; letter-spacing: -0.002em; font-weight: 700; }
.ee-st-head-cnt { font-size: 14px; color: var(--wds-text-alt); }

.ee-st-empty { display: grid; place-items: center; gap: 8px; padding: 48px 0; color: var(--wds-text-alt); }
.ee-st-empty-t { font-size: 15px; }
.ee-st-miss { padding: 48px 0; text-align: center; color: var(--wds-text-alt); }
.ee-st-p { margin: 0; padding-top: 20px; font-size: 15px; line-height: 24px; color: var(--wds-text-alt); }
.ee-st-pg { display: flex; justify-content: center; gap: 4px; padding-top: 28px; }
.ee-st-pg-n {
  width: 40px; height: 40px; border-radius: 4px; border: 0; cursor: pointer;
  font-family: var(--font-core); font-size: 15px; font-weight: 500;
  background: transparent; color: var(--wds-text-neutral);
}
.ee-st-pg-n.is-on { font-weight: 700; background: var(--wds-text); color: #fff; }
.ee-st-search {
  flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; width: 240px; height: 36px;
  padding: 0 12px; border-radius: 4px; background: var(--wds-surface);
  box-shadow: inset 0 0 0 1px var(--wds-line); box-sizing: border-box;
}
.ee-st-search.is-faq { width: auto; margin-left: auto; max-width: 260px; }
.ee-st-search-ico { flex: none; color: var(--wds-text-alt); display: grid; }
.ee-st-search-in {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: var(--font-core); font-size: 15px; color: var(--wds-text);
}
.ee-st-search-x {
  flex: none; width: 20px; height: 20px; border: 0; background: transparent; padding: 0;
  display: grid; place-items: center; cursor: pointer; color: var(--wds-text-alt);
}
.ee-st-btns { display: flex; justify-content: center; gap: 8px; padding-top: 28px; }
.ee-st-btn-ghost {
  flex: 0 0 auto; height: 48px; padding: 0 24px; border-radius: 4px; display: grid; place-items: center;
  background: var(--wds-fill); color: var(--wds-text-neutral); font-size: 16px; font-weight: 700;
  text-decoration: none; box-sizing: border-box;
}
.ee-st-btn-ghost.is-narrow { padding: 0 20px; }
.ee-st-btn-primary {
  flex: 0 0 auto; height: 48px; padding: 0 20px; border-radius: 4px; display: grid; place-items: center;
  background: var(--wds-primary); color: #fff; font-size: 16px; font-weight: 700;
  text-decoration: none; box-sizing: border-box;
}
.ee-st-cta {
  margin-top: 8px; height: 48px; padding: 0 20px; border-radius: 4px; display: grid; place-items: center;
  background: var(--wds-primary); color: #fff; font-size: 16px; font-weight: 700;
  text-decoration: none; box-sizing: border-box;
}

.ee-st-nl-tools { display: flex; align-items: center; gap: 8px; padding-top: 20px; flex-wrap: wrap; }
.ee-st-nl-search-w { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; }
.ee-st-nl { margin-top: 20px; border-top: 1px solid var(--wds-text); }
.ee-st-nl-a {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 60px; padding: 16px 4px;
  box-shadow: inset 0 -1px 0 var(--wds-line-alt); text-decoration: none; flex-direction: row; box-sizing: border-box;
}
.ee-st-nl-no { flex: none; width: 48px; text-align: center; font-size: 14px; color: var(--wds-text-assistive); font-weight: 500; }
.ee-st-nl-no.is-pin { color: var(--wds-primary); font-weight: 700; }
.ee-st-nl-subj {
  flex: 1; min-width: 0; font-size: 16px; letter-spacing: 0.0096em; font-weight: 500; color: var(--wds-text);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.ee-st-nl-subj.is-pin { font-weight: 700; }
.ee-st-nl-views { flex: none; width: 70px; text-align: right; font-size: 14px; color: var(--wds-text-alt); }
.ee-st-nl-date { flex: none; width: 92px; text-align: right; font-size: 14px; letter-spacing: 0.0194em; color: var(--wds-text-alt); }
.ee-st-nl-pin { font-size: 13px; font-weight: 700; letter-spacing: 0.0252em; color: var(--wds-primary); }
.ee-st-nl-subj-m {
  font-size: 16px; line-height: 24px; letter-spacing: 0.0096em; font-weight: 500; color: var(--wds-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ee-st-nl-subj-m.is-pin { font-weight: 700; }
.ee-st-nl-date-m { font-size: 13px; letter-spacing: 0.0252em; color: var(--wds-text-assistive); }

.ee-st-nv-hd { padding-top: 24px; display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; box-shadow: inset 0 -1px 0 var(--wds-line-neutral); }
.ee-st-nv-top { display: flex; align-items: center; gap: 8px; }
.ee-st-nv-views { margin-left: auto; font-size: 13px; letter-spacing: 0.0252em; color: var(--wds-text-assistive); }
.ee-st-nv-h2 { margin: 0; font-size: 24px; line-height: 32px; letter-spacing: -0.0194em; font-weight: 700; }
.ee-st-nv-by { font-size: 14px; letter-spacing: 0.0194em; color: var(--wds-text-alt); }
.ee-st-doc { padding: 28px 0; font-size: 16px; line-height: 28px; letter-spacing: 0.0096em; color: var(--wds-text-neutral); }
.ee-st-nav { margin-top: 32px; border-top: 1px solid var(--wds-line-neutral); }
.ee-st-nav-a {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 0;
  box-shadow: inset 0 -1px 0 var(--wds-line-alt); text-decoration: none; cursor: pointer; box-sizing: border-box;
}
.ee-st-nav-a.is-empty { cursor: default; }
.ee-st-nav-k { flex: none; width: 56px; font-size: 14px; color: var(--wds-text-alt); }
.ee-st-nav-t {
  flex: 1; min-width: 0; font-size: 15px; color: var(--wds-text-neutral);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.ee-st-nav-t.is-empty { color: var(--wds-text-assistive); }

.ee-st-tabs { display: flex; gap: 0; margin-top: 16px; overflow-x: auto; box-shadow: inset 0 -1px 0 var(--wds-line-neutral); }
.ee-st-tab {
  flex: 0 0 auto; min-width: 150px; padding: 0 20px; min-height: 48px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-core); font-size: 16px; letter-spacing: 0.0096em; font-weight: 500;
  color: var(--wds-text-alt); box-shadow: none; white-space: nowrap;
}
.ee-st-tab.is-on { font-weight: 700; color: var(--wds-text); box-shadow: inset 0 -2px 0 var(--wds-text); }
.ee-st-lead { margin: 0; padding: 24px 0 12px; font-size: 15px; line-height: 24px; letter-spacing: 0.0145em; color: var(--wds-text-alt); }
.ee-st-doc2 { padding-top: 12px; font-size: 15px; line-height: 26px; letter-spacing: 0.0145em; color: var(--wds-text-neutral); }

.ee-st-ev-tabs { display: flex; box-shadow: inset 0 -1px 0 var(--wds-line-neutral); margin-top: 16px; }
.ee-st-ev-tab {
  flex: 0 0 auto; min-width: 160px; min-height: 48px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-core); font-size: 16px; letter-spacing: 0.0096em; font-weight: 500;
  color: var(--wds-text-alt); box-shadow: none;
}
.ee-st-ev-tab.is-on { font-weight: 700; color: var(--wds-text); box-shadow: inset 0 -2px 0 var(--wds-text); }
.ee-st-ev-tab-n { color: var(--wds-text-assistive); }
.ee-st-ev-tab.is-on .ee-st-ev-tab-n { color: var(--wds-primary); }
.ee-st-ev-empty { display: grid; place-items: center; gap: 10px; padding: 80px 0; color: var(--wds-text-alt); }
.ee-st-ev-empty-t { font-size: 16px; font-weight: 600; color: var(--wds-text-neutral); }
.ee-st-ev-empty-d { font-size: 14px; text-align: center; }
.ee-st-ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; padding-top: 28px; }
.ee-st-ev-a { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.ee-st-ev-th { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--wds-fill); display: block; }
.ee-st-ev-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: none; }
.ee-st-ev-img.is-off { filter: grayscale(1); }
.ee-st-ev-dday {
  position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; height: 24px;
  padding: 0 8px; border-radius: 4px; background: var(--wds-primary); color: #fff; font-size: 13px; font-weight: 700;
}
.ee-st-ev-over { position: absolute; inset: 0; background: rgba(23, 23, 25, 0.36); display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 700; }
.ee-st-ev-meta { display: flex; flex-direction: column; gap: 5px; }
.ee-st-ev-subj { font-size: 18px; line-height: 26px; font-weight: 700; color: var(--wds-text); }
.ee-st-ev-subj.is-off { color: var(--wds-text-alt); }
.ee-st-ev-date { font-size: 13px; letter-spacing: 0.0252em; color: var(--wds-text-assistive); }
.ee-st-ev-an { font-size: 13px; color: var(--wds-text-alt); }

.ee-st-evv-img-w { position: relative; width: 100%; margin-top: 24px; border-radius: 4px; overflow: hidden; background: var(--wds-fill); }
.ee-st-evv-img { width: 100%; height: auto; display: block; }
.ee-st-evv-hd { display: flex; flex-direction: column; gap: 10px; padding: 28px 0; box-shadow: inset 0 -1px 0 var(--wds-line-neutral); }
.ee-st-evv-badges { display: flex; align-items: center; gap: 6px; }
.ee-st-evv-badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 4px;
  background: var(--wds-primary); color: #fff; font-size: 13px; font-weight: 700;
}
.ee-st-evv-badge.is-off { background: var(--wds-fill); color: var(--wds-text-assistive); }
.ee-st-evv-h2 { margin: 0; font-size: 26px; line-height: 34px; letter-spacing: -0.023em; font-weight: 800; }
.ee-st-evv-date { display: flex; align-items: center; gap: 6px; font-size: 14px; letter-spacing: 0.0194em; color: var(--wds-text-neutral); }
.ee-st-doc3 { padding: 28px 0; font-size: 16px; line-height: 28px; color: var(--wds-text-neutral); }

.ee-st-faq-i { box-shadow: inset 0 -1px 0 var(--wds-line-alt); }
.ee-st-faq-pg { display: flex; justify-content: center; gap: 4px; padding-top: 24px; }

.ee-st-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 24px; }
.ee-st-step { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 4px; background: var(--wds-surface-alt); }
.ee-st-step-n { width: 28px; height: 28px; border-radius: 1000px; display: grid; place-items: center; background: var(--wds-text); color: #fff; font-size: 14px; font-weight: 800; }
.ee-st-step-t { font-size: 16px; font-weight: 700; }
.ee-st-step-s { font-size: 13px; line-height: 20px; color: var(--wds-text-alt); }
.ee-st-note { display: flex; gap: 8px; margin-top: 20px; padding: 16px; border-radius: 4px; background: var(--wds-surface-alt); }
.ee-st-note-i { flex: none; color: var(--wds-text-alt); display: grid; }
.ee-st-note-t { flex: 1; font-size: 13px; line-height: 20px; color: var(--wds-text-alt); }
.ee-st-sl-acts { display: flex; flex-direction: row; gap: 8px; padding-top: 28px; }
.ee-st-sl-badge { padding: 14px 20px; border-radius: 4px; background: var(--wds-fill); font-size: 15px; font-weight: 600; color: var(--wds-text-neutral); }
.ee-st-sl-badge.is-applied { background: var(--wds-primary-tint); color: var(--wds-primary); }
.ee-st-sl-apply {
  height: 52px; padding: 0 28px; border-radius: 4px; border: 0; cursor: pointer;
  font-family: var(--font-core); font-size: 16px; font-weight: 700; background: var(--wds-primary); color: #fff;
}
.ee-st-sl-partner {
  height: 52px; padding: 0 20px; border-radius: 4px; display: grid; place-items: center;
  font-size: 15px; font-weight: 700; background: var(--wds-fill); color: var(--wds-text-neutral);
  text-decoration: none; box-sizing: border-box;
}
.ee-st-sl-err { padding-top: 12px; font-size: 14px; color: var(--wds-destructive); }

.ee-st-pt-form { margin-top: 20px; border-top: 1px solid var(--wds-line-neutral); }
.ee-st-pt-field { display: flex; flex-direction: row; gap: 16px; padding: 16px 0; box-shadow: inset 0 -1px 0 var(--wds-line-alt); }
.ee-st-pt-label { flex: 0 0 120px; padding-top: 12px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--wds-text-neutral); }
.ee-st-pt-req { color: var(--wds-primary); }
.ee-st-pt-body { flex: 1; min-width: 0; max-width: 500px; display: flex; flex-direction: column; gap: 6px; }
.ee-st-pt-hint { font-size: 12px; line-height: 16px; color: var(--wds-text-alt); }
.ee-st-pt-in {
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 14px; border: 0; outline: none;
  border-radius: 4px; background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line);
  font-family: var(--font-core); font-size: 15px; color: var(--wds-text);
}
.ee-st-pt-sel-w { position: relative; }
.ee-st-pt-sel {
  width: 100%; height: 44px; padding: 0 12px 0 14px; display: flex; align-items: center; gap: 6px;
  border: 0; border-radius: 4px; background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line);
  cursor: pointer; font-family: var(--font-core); font-size: 15px; color: var(--wds-text);
}
.ee-st-pt-sel.is-empty { color: var(--wds-text-assistive); }
.ee-st-pt-sel-t { flex: 1; text-align: left; }
.ee-st-pt-drop {
  position: absolute; left: 0; right: 0; top: 48px; z-index: 30;
  background: var(--wds-surface); border-radius: 8px; box-shadow: var(--wds-elev-popover); padding: 6px;
}
.ee-st-pt-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 44px; padding: 0 12px;
  border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font-family: var(--font-core); font-size: 15px; text-align: left; color: var(--wds-text-neutral); font-weight: 500;
}
.ee-st-pt-opt.is-on { background: var(--wds-fill); font-weight: 700; }
.ee-st-pt-opt-t { flex: 1; }
.ee-st-pt-ta {
  width: 100%; box-sizing: border-box; min-height: 220px; padding: 14px; border: 0; outline: none;
  border-radius: 4px; background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line);
  resize: vertical; font-family: var(--font-core); font-size: 15px; line-height: 24px; color: var(--wds-text);
}
.ee-st-pt-agree {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px;
  border: 0; background: transparent; padding: 0; cursor: pointer; font-family: var(--font-core); text-align: left;
}
.ee-st-pt-box {
  flex: none; width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center;
  background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line); color: #fff;
}
.ee-st-pt-box.is-on { background: var(--wds-text); box-shadow: none; }
.ee-st-pt-agree-t { flex: 1; font-size: 14px; line-height: 20px; color: var(--wds-text-neutral); }
.ee-st-pt-submit-w { display: flex; gap: 8px; justify-content: flex-end; padding-top: 28px; }
.ee-st-pt-submit {
  flex: 0 0 auto; height: 48px; padding: 0 20px; border-radius: 4px; border: 0; cursor: not-allowed;
  font-family: var(--font-core); font-size: 15px; font-weight: 700;
  background: var(--wds-fill); color: var(--wds-text-assistive);
}
.ee-st-pt-submit.is-ready { cursor: pointer; background: var(--wds-primary); color: #fff; }
.ee-st-pt-done-dim { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px 16px; box-sizing: border-box; }
.ee-st-pt-done-bg { position: absolute; inset: 0; background: rgba(23, 23, 25, 0.52); }
.ee-st-pt-done {
  position: relative; box-sizing: border-box; width: 100%; max-width: 420px;
  background: var(--wds-surface); border-radius: 12px; box-shadow: var(--wds-elev-popover);
  padding: 24px; display: flex; flex-direction: column; gap: 8px;
}
.ee-st-pt-done-t { font-size: 18px; line-height: 26px; font-weight: 700; }
.ee-st-pt-done-d { font-size: 14px; line-height: 22px; color: var(--wds-text-alt); }
.ee-st-pt-done-acts { padding-top: 12px; }
.ee-st-pt-done-ok {
  width: 100%; height: 48px; border-radius: 4px; border: 0; cursor: pointer;
  font-family: var(--font-core); font-size: 15px; font-weight: 700; background: var(--wds-primary); color: #fff;
}

.ee-st-csf {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 44px; padding: 20px; border-radius: 4px; background: var(--wds-surface-alt);
}
.ee-st-csf-t { flex: 1 1 160px; min-width: 160px; font-size: 14px; line-height: 22px; letter-spacing: 0.0145em; color: var(--wds-text-neutral); }
.ee-st-csf-a {
  flex: 0 0 auto; height: 48px; padding: 0 20px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  background: var(--wds-text); color: #fff; font-size: 15px; font-weight: 700;
  transition: opacity var(--dur-fast) ease;
}
.ee-st-csf-a:hover { opacity: 0.86; }

.ee-st-sec { display: flex; flex-direction: column; padding-top: 36px; }
.ee-st-sec-h2 { font-size: 18px; line-height: 26px; letter-spacing: -0.002em; font-weight: 700; padding-bottom: 12px; box-shadow: inset 0 -1px 0 var(--wds-text); }
.ee-st-sec-p { margin: 0; padding-top: 18px; font-size: 15px; line-height: 26px; letter-spacing: 0.0096em; color: var(--wds-text-neutral); }

.ee-st-info { padding-top: 14px; }
.ee-st-info-r { display: flex; gap: 12px; padding: 8px 0; align-items: baseline; }
.ee-st-info-k { flex: 0 0 130px; font-size: 13px; line-height: 22px; letter-spacing: 0.0194em; color: var(--wds-text-alt); }
.ee-st-info-v { flex: 1; min-width: 0; font-size: 14px; line-height: 22px; letter-spacing: 0.0145em; color: var(--wds-text-neutral); word-break: keep-all; }

.ee-st-sec-acts { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 14px; }
.ee-st-sec-b {
  flex: 0 0 auto; height: 48px; padding: 0 20px; border-radius: 4px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  font-size: 15px; font-weight: 700; background: var(--wds-fill); color: var(--wds-text-neutral);
  transition: background var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.ee-st-sec-b:hover { background: var(--wds-line-alt); }
.ee-st-sec-b.is-primary { background: var(--wds-primary); color: #fff; }
.ee-st-sec-b.is-primary:hover { background: var(--wds-primary); opacity: 0.9; }

.ee-cs-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 28px; }
.ee-cs-side { position: sticky; top: 24px; border-radius: 4px; background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line-alt); overflow: hidden; display: flex; flex-direction: column; padding: 14px 0 10px; }
.ee-cs-side-cap { font-size: 11px; font-weight: 700; letter-spacing: 0.0311em; color: var(--wds-text-assistive); padding: 0 16px 6px; }
.ee-cs-side-a {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  text-decoration: none; background: transparent; transition: background var(--dur-fast) ease;
}
.ee-cs-side-a:hover { background: var(--wds-fill); }
.ee-cs-side-a.is-on { background: var(--wds-fill); }
.ee-cs-side-a.is-on::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 1000px 1000px 0; background: var(--wds-primary); }
.ee-cs-side-i { flex: none; display: grid; color: var(--wds-text-alt); }
.ee-cs-side-a.is-on .ee-cs-side-i { color: var(--wds-text); }
.ee-cs-side-t { flex: 1; font-size: 14px; letter-spacing: 0.0145em; font-weight: 500; color: var(--wds-text-neutral); }
.ee-cs-side-a.is-on .ee-cs-side-t { font-weight: 700; color: var(--wds-text); }
.ee-cs-side-c { flex: none; display: grid; color: var(--wds-text-assistive); }
.ee-cs-main { min-width: 0; }

.ee-cs-home { display: flex; flex-direction: column; gap: 40px; }
.ee-cs-hero { display: flex; flex-direction: row; align-items: center; gap: 24px; padding: 28px 32px; border-radius: 4px; background: var(--wds-surface-alt); }
.ee-cs-hero-l { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ee-cs-kicker { font-size: 12px; letter-spacing: 0.0311em; font-weight: 700; color: var(--wds-text-alt); }
.ee-cs-lead { font-size: 22px; line-height: 30px; letter-spacing: -0.0194em; font-weight: 700; }
.ee-cs-tel-w { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.ee-cs-tel { font-size: 28px; font-weight: 800; letter-spacing: -0.0236em; }
.ee-cs-hours { font-size: 13px; line-height: 20px; letter-spacing: 0.0194em; color: var(--wds-text-alt); }
.ee-cs-acts { flex: none; display: flex; gap: 8px; width: auto; }
.ee-cs-ask, .ee-cs-faq {
  flex: 0 0 auto; height: 48px; padding: 0 20px; border-radius: 4px; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  font-size: 15px; font-weight: 700; letter-spacing: 0.0096em;
  transition: opacity var(--dur-fast) ease, background var(--dur-fast) ease;
}
.ee-cs-ask { background: var(--wds-primary); color: #fff; }
.ee-cs-ask:hover { opacity: 0.9; }
.ee-cs-faq { background: var(--wds-fill); color: var(--wds-text-neutral); }
.ee-cs-faq:hover { background: var(--wds-line-alt); }

.ee-cs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 1024px) { .ee-cs-row { grid-template-columns: 1fr; } }

.ee-cs-h2-w { padding-bottom: 16px; box-shadow: inset 0 -1px 0 var(--wds-text); }
.ee-cs-h2-w.is-row { display: flex; align-items: center; gap: 8px; }
.ee-cs-h2 { flex: 1; margin: 0; font-size: 19px; line-height: 28px; letter-spacing: -0.002em; font-weight: 700; }
.ee-cs-more { flex: none; display: inline-flex; align-items: center; gap: 2px; text-decoration: none; font-size: 13px; letter-spacing: 0.0194em; font-weight: 600; color: var(--wds-text-alt); }
.ee-cs-more:hover { color: var(--wds-text); }

.ee-cs-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 20px; }
.ee-cs-quick-a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 104px; padding: 18px 10px; border-radius: 4px; background: var(--wds-surface-alt);
  text-decoration: none; box-sizing: border-box; transition: background var(--dur-fast) ease;
}
.ee-cs-quick-a:hover { background: var(--wds-fill); }
.ee-cs-quick-i { color: var(--wds-text-neutral); display: grid; }
.ee-cs-quick-l { font-size: 13px; line-height: 19px; letter-spacing: 0.0194em; font-weight: 600; color: var(--wds-text-neutral); text-align: center; word-break: keep-all; }

.ee-cs-nt { display: flex; flex-direction: column; padding-top: 8px; }
.ee-cs-nt-a { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 16px 0; text-decoration: none; box-shadow: inset 0 -1px 0 var(--wds-line-alt); box-sizing: border-box; }
.ee-cs-nt-a:last-child { box-shadow: none; }
.ee-cs-nt-pin { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 4px; background: var(--wds-text); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.0311em; }
.ee-cs-nt-subj { flex: 1; min-width: 0; font-size: 15px; line-height: 22px; letter-spacing: 0.0145em; color: var(--wds-text-neutral); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ee-cs-nt-date { flex: none; font-size: 12px; letter-spacing: 0.0252em; color: var(--wds-text-alt); }

.ee-cs-faqpage { min-width: 0; }
.ee-cs-faq-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 24px; }
.ee-cs-faq-cats { display: flex; gap: 6px; overflow-x: auto; flex: 0 0 auto; }
.ee-cs-faq-cat {
  flex: none; height: 36px; padding: 0 14px; border-radius: 1000px; border: 0; cursor: pointer;
  font-family: var(--font-core); font-size: 13px; font-weight: 600; letter-spacing: 0.0194em;
  background: var(--wds-fill); color: var(--wds-text-neutral); white-space: nowrap;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.ee-cs-faq-cat:hover { background: var(--wds-line-alt); }
.ee-cs-faq-cat.is-on { background: var(--wds-text); color: #fff; }
.ee-cs-faq-search {
  flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 6px; width: 240px; height: 36px;
  padding: 0 12px; border-radius: 4px; background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line); box-sizing: border-box;
}
.ee-cs-faq-search-i { flex: none; color: var(--wds-text-alt); display: grid; }
.ee-cs-faq-search-in { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--font-core); font-size: 14px; letter-spacing: 0.0145em; color: var(--wds-text); }
.ee-cs-faq-search-x { flex: none; width: 20px; height: 20px; border: 0; background: transparent; padding: 0; display: grid; place-items: center; cursor: pointer; color: var(--wds-text-alt); }

.ee-cs-faq-list { margin-top: 20px; border-top: 1px solid var(--wds-text); }
.ee-cs-faq-i { box-shadow: inset 0 -1px 0 var(--wds-line-alt); }
.ee-cs-faq-q { display: flex; align-items: center; gap: 10px; width: 100%; padding: 16px 4px; border: 0; background: transparent; cursor: pointer; font-family: var(--font-core); text-align: left; }
.ee-cs-faq-mark { flex: none; width: 20px; font-size: 15px; font-weight: 800; color: var(--wds-primary); }
.ee-cs-faq-mark.is-a { color: var(--wds-text-assistive); }
.ee-cs-faq-qt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ee-cs-faq-cap { font-size: 11px; line-height: 14px; letter-spacing: 0.0311em; font-weight: 700; color: var(--wds-text-alt); }
.ee-cs-faq-t { font-size: 15px; line-height: 22px; letter-spacing: 0.0096em; color: var(--wds-text); font-weight: 500; }
.ee-cs-faq-t.is-on { font-weight: 700; }
.ee-cs-faq-chev { flex: none; color: var(--wds-text-assistive); display: grid; }
.ee-cs-faq-aw { display: flex; gap: 10px; padding: 0 4px 20px; }
.ee-cs-faq-a { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 22px; letter-spacing: 0.0145em; color: var(--wds-text-neutral); }

.ee-cs-faq-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; padding: 20px 24px; border-radius: 4px; background: var(--wds-surface-alt); }
.ee-cs-faq-cta-t { flex: 1; min-width: 160px; font-size: 14px; line-height: 22px; letter-spacing: 0.0145em; color: var(--wds-text-neutral); }
.ee-cs-faq-cta-a { flex: 0 0 auto; height: 48px; padding: 0 20px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: var(--wds-text); color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; }
.ee-cs-faq-cta-a:hover { opacity: 0.86; }

.ee-st-ask-note-box { display: flex; gap: 8px; padding: 16px; border-radius: 4px; background: var(--wds-surface-alt); margin-top: 24px; }
.ee-st-ask-note-i { flex: none; color: var(--wds-text-alt); display: grid; }
.ee-st-ask-note-t { flex: 1; font-size: 13px; line-height: 20px; letter-spacing: 0.0194em; color: var(--wds-text-alt); word-break: keep-all; }
.ee-st-ask-form { margin-top: 20px; border-top: 1px solid var(--wds-line-neutral); }
.ee-st-ask { display: flex; flex-direction: column; gap: 0; padding-top: 4px; }
.ee-st-ask-f { display: flex; flex-direction: column; gap: 8px; padding: 20px 0; box-shadow: inset 0 -1px 0 var(--wds-line-alt); }
.ee-st-ask-lab-t { flex: 1; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--wds-text-neutral); }
.ee-st-ask-req { font-style: normal; color: var(--wds-primary); padding-left: 3px; }
.ee-st-ask-hint { flex: none; font-size: 12px; line-height: 16px; color: var(--wds-text-assistive); font-variant-numeric: tabular-nums; }
.ee-st-ask-msg { font-size: 12px; line-height: 18px; color: var(--wds-primary); }
.ee-st-ask-f.is-err .ee-st-ask-in, .ee-st-ask-f.is-err .ee-st-ask-ta { box-shadow: inset 0 0 0 1px var(--wds-primary); }
.ee-st-ask-in {
  width: 100%; max-width: 520px; box-sizing: border-box; height: 44px; padding: 0 14px; border: 0; outline: none;
  border-radius: 4px; background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line);
  font-family: var(--font-core); font-size: 15px; color: var(--wds-text);
}
.ee-st-ask-ta {
  width: 100%; box-sizing: border-box; min-height: 200px; padding: 14px; border: 0; outline: none;
  border-radius: 4px; background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line);
  resize: vertical; font-family: var(--font-core); font-size: 15px; line-height: 24px; color: var(--wds-text);
}
.ee-st-ask-in:focus, .ee-st-ask-ta:focus { box-shadow: inset 0 0 0 1.5px var(--wds-text); }
.ee-st-ask-cats { display: flex; gap: 6px; flex-wrap: wrap; }
.ee-st-ask-cat {
  flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 1000px; cursor: pointer;
  background: var(--wds-fill); color: var(--wds-text-neutral);
  font-family: var(--font-core); font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.ee-st-ask-cat:hover { background: var(--wds-line-alt); }
.ee-st-ask-cat.is-on { background: var(--wds-text); color: #fff; }
.ee-st-ask-file {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; cursor: pointer;
  border-radius: 4px; background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line);
  font-size: 14px; font-weight: 600; color: var(--wds-text-neutral); width: fit-content;
  transition: background var(--dur-fast) ease;
}
.ee-st-ask-file:hover { background: var(--wds-fill); }
.ee-st-ask-file-p { font-size: 18px; line-height: 1; font-weight: 500; color: var(--wds-text-assistive); }
.ee-st-ask-file-t { line-height: 20px; }
.ee-st-ask-file-in { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ee-st-ask-thumb {
  display: flex; align-items: center; gap: 10px; padding: 8px; width: fit-content; max-width: 100%;
  border-radius: 4px; background: var(--wds-surface); box-shadow: inset 0 0 0 1px var(--wds-line);
}
.ee-st-ask-thumb-i { flex: none; width: 44px; height: 44px; border-radius: 2px; object-fit: cover; display: block; }
.ee-st-ask-thumb-n { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; color: var(--wds-text-neutral); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ee-st-ask-thumb-x {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 1000px;
  background: var(--wds-fill); color: var(--wds-text-neutral); cursor: pointer;
}
.ee-st-ask-thumb-x:hover { background: var(--wds-line-alt); }
.ee-st-ask-chk { display: flex; align-items: center; gap: 8px; min-height: 28px; cursor: pointer; font-size: 13px; line-height: 20px; color: var(--wds-text-alt); }
.ee-st-ask-chk input { width: 17px; height: 17px; accent-color: var(--wds-text); cursor: pointer; }
.ee-st-ask-note { margin: 16px 0 0; font-size: 13px; line-height: 20px; color: var(--wds-text-assistive); }
.ee-st-ask-fail { margin: 10px 0 0; font-size: 14px; line-height: 22px; color: var(--wds-primary); font-weight: 600; }
.ee-st-ask-acts { display: flex; gap: 8px; justify-content: flex-end; padding-top: 24px; }
.ee-st-ask-cancel, .ee-st-ask-send {
  min-width: 128px; height: 48px; padding: 0 24px; border: 0; border-radius: 4px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-core); font-size: 15px; font-weight: 700; text-decoration: none;
  transition: opacity var(--dur-fast) ease, background var(--dur-fast) ease;
}
.ee-st-ask-cancel { background: var(--wds-fill); color: var(--wds-text-neutral); }
.ee-st-ask-cancel:hover { background: var(--wds-line-alt); }
.ee-st-ask-send { background: var(--wds-primary); color: #fff; }
.ee-st-ask-send:hover { opacity: 0.9; }
.ee-st-ask-send:disabled { cursor: default; opacity: 0.5; }
.ee-st-ask-gate { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 64px 20px; color: var(--wds-text-assistive); text-align: center; }
.ee-st-ask-gate-t { font-size: 17px; line-height: 26px; font-weight: 700; color: var(--wds-text); padding-top: 6px; }
.ee-st-ask-gate-d { font-size: 14px; line-height: 22px; color: var(--wds-text-alt); }
.ee-st-ask-gate-a {
  margin-top: 12px; min-width: 180px; height: 48px; padding: 0 24px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  background: var(--wds-primary); color: #fff; font-size: 15px; font-weight: 700;
}
.ee-st-ask-gate-a:hover { opacity: 0.9; }
.ee-st-ask-dim { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px 16px; box-sizing: border-box; background: rgba(23, 23, 25, 0.52); }
.ee-st-ask-modal {
  position: relative; width: 100%; max-width: 380px; box-sizing: border-box; padding: 28px 24px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  border-radius: 12px; background: var(--wds-surface); box-shadow: var(--wds-elev-popover);
}
.ee-st-ask-modal-i { color: var(--wds-primary); display: grid; }
.ee-st-ask-modal-t { font-size: 18px; line-height: 26px; font-weight: 700; }
.ee-st-ask-modal-d { font-size: 14px; line-height: 22px; color: var(--wds-text-alt); }
.ee-st-ask-modal-a { display: flex; gap: 8px; width: 100%; padding-top: 14px; }
.ee-st-ask-modal-b {
  flex: 1; height: 48px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 15px; font-weight: 700;
  background: var(--wds-fill); color: var(--wds-text-neutral);
}
.ee-st-ask-modal-b.is-primary { background: var(--wds-primary); color: #fff; }

.ee-st-ptabs { display: flex; gap: 6px; overflow-x: auto; padding-top: 20px; }
.ee-st-ptab {
  flex: none; height: 36px; padding: 0 14px; border-radius: 1000px; border: 0; cursor: pointer;
  font-family: var(--font-core); font-size: 13px; font-weight: 600; letter-spacing: 0.0194em;
  background: var(--wds-fill); color: var(--wds-text-neutral); white-space: nowrap;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.ee-st-ptab:hover { background: var(--wds-line-alt); }
.ee-st-ptab.is-on { background: var(--wds-text); color: #fff; }

@media (min-width: 769px) {
  .ee-st-ask-f { flex-direction: row; gap: 16px; padding: 16px 0; }
  .ee-st-ask-lab-t { flex: 0 0 120px; padding-top: 12px; }
  .ee-st-ask-body { flex: 1; min-width: 0; max-width: 500px; display: flex; flex-direction: column; gap: 6px; }
  .ee-st-ask-f:first-of-type { border-top: 0; }
}
@media (max-width: 768px) {
  .ee-st-title { font-size: 17px; line-height: 26px; }
  .sh-pad-doc { padding-top: 16px; }
  .ee-st-ev-grid { grid-template-columns: 1fr; gap: 20px 0; }
  .ee-st-quick, .ee-cs-quick { grid-template-columns: repeat(2, 1fr); }
  .ee-cs-layout { display: block; padding-top: 0; }
  .ee-cs-hero, .ee-st-cs-hero { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .ee-cs-row { grid-template-columns: 1fr; gap: 28px; }
  .ee-st-steps { grid-template-columns: 1fr; }
  .ee-st-pt-field { flex-direction: column; gap: 6px; padding: 14px 0; }
  .ee-st-pt-label { flex: none; padding-top: 0; }
  .ee-st-ask-in, .ee-st-ask-ta { max-width: none; }
  .ee-st-ask-body { display: flex; flex-direction: column; gap: 6px; }
}

/* ── 이 프로토타입 전용: 헤더/푸터 placeholder(별도 공통작업 대기, order 때와 동일) ── */
.proto-hdr { display: flex; align-items: center; gap: 16px; padding: 14px 20px; box-shadow: inset 0 -1px 0 var(--wds-line); font-weight: 700; }
.proto-hdr .note { font-weight: 400; font-size: 12px; color: var(--wds-text-assistive); }
.proto-ftr { padding: 40px 20px; text-align: center; font-size: 12px; color: var(--wds-text-assistive); }
.proto-demo-nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px; background: var(--wds-surface-alt); box-shadow: inset 0 -1px 0 var(--wds-line); }
.proto-demo-nav a { font-size: 12px; padding: 4px 8px; border-radius: 4px; background: var(--wds-fill); text-decoration: none; color: var(--wds-text-neutral); }
.proto-demo-nav a.is-on { background: var(--wds-text); color: #fff; }

/* 고객센터 3화면은 .ee-cs-layout 이 자기 위 여백(28px)을 갖고 있다 —
   .sh-pad-doc 에 넣은 위 여백과 겹치지 않게 여기서만 0 으로 둔다. */
.sh-pad-doc > .ee-cs-layout { padding-top: 0; }