/* ============================================================
   (주)부영미트 — 공통 디자인 시스템
   Tailwind CDN은 레이아웃(그리드/간격/반응형)만 담당하고,
   색·타이포·질감·모션은 전부 이 파일에서 정의합니다.
   ============================================================ */

:root {
  /* 브랜드 — 명함 로고에서 추출한 실제 브랜드 컬러 */
  --brand:        #1555A2;  /* 로고 '부영' 남색 */
  --brand-deep:   #0E3E79;
  --brand-soft:   #2069BE;
  --brand-tint:   #EAF2FA;
  --brand-on-dark:#7EC4E8;
  --brand-sky:    #0FA1CA;  /* 로고 '미트' 하늘색 */
  --error:        #C0392B;  /* 폼 오류 전용 — 브랜드색과 헷갈리지 않게 */

  /* 잉크 · 종이 — 로고에 맞춰 살짝 차가운 뉴트럴로 */
  --ink:          #101720;
  --ink-soft:     #3D4A57;
  --ink-mute:     #6B7885;
  --paper:        #F8FAFC;
  --paper-warm:   #EDF2F7;
  --line:         #DCE3EA;

  /* 어두운 면 */
  --dark:         #0C1420;
  --dark-2:       #16202E;

  /* 그림자는 배경 색조(차가운 남색)를 머금게 */
  --shadow-sm:    0 1px 2px rgba(16,30,50,.05), 0 8px 20px -10px rgba(16,30,50,.18);
  --shadow-md:    0 2px 4px rgba(16,30,50,.06), 0 22px 44px -18px rgba(16,30,50,.26);
  --shadow-lg:    0 4px 8px rgba(16,30,50,.07), 0 40px 72px -24px rgba(16,30,50,.34);

  --ease-out:     cubic-bezier(.16, 1, .3, 1);
  --ease-spring:  cubic-bezier(.34, 1.4, .64, 1);

  /* z-index 스케일 */
  --z-grain: 1;
  --z-sticky: 40;
  --z-header: 60;
  --z-bar: 70;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[id] { scroll-margin-top: 96px; }

::selection { background: var(--brand); color: #fff; }

/* ---------- 접근성 ---------- */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-dark :focus-visible { outline-color: var(--brand-on-dark); }

.skip-link {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 200; background: var(--brand); color: #fff;
  padding: .75rem 1.5rem; border-radius: 0 0 .75rem .75rem;
  font-weight: 700; font-size: .9375rem;
  transition: transform .25s var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- 타이포그래피 ---------- */
.display {
  font-family: 'Instrument Serif', 'Pretendard Variable', serif;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.h-hero, .h-sec, .h-page {
  letter-spacing: -.035em;
  text-wrap: balance;
}
/* 한글은 라틴보다 글자 높이가 커서 행간을 조금 더 줍니다 */
.h-hero { font-weight: 800; }
.h-sec  { font-weight: 800; }
.h-page { font-weight: 800; }

/* Tailwind 의 text-3xl·text-5xl 같은 유틸리티는 글자 크기와 함께 고정 행간을
   얹는다. md 이상에서 text-[2.7rem] 로 글자만 키우면 행간이 그대로 남아
   줄이 서로 붙어버린다(43px 글자에 36px 행간). :not() 으로 우선순위를 올려
   막되, leading-* 을 직접 지정한 요소는 그 값을 그대로 존중한다. */
.h-hero:not([class*="leading-"]) { line-height: 1.18; }
.h-sec:not([class*="leading-"])  { line-height: 1.34; }
.h-page:not([class*="leading-"]) { line-height: 1.22; }

p { text-wrap: pretty; }
.prose-w { max-width: 62ch; }

/* 라틴 라벨 — 대문자 tracking 대신 소문자 세리프 이탤릭 */
.eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: 'Instrument Serif', serif;
  font-style: italic; font-size: 1.0625rem; line-height: 1;
  color: var(--brand); letter-spacing: .005em;
}
.eyebrow::before {
  content: ''; width: 2.5rem; height: 1px;
  background: currentColor; opacity: .45;
}
.on-dark .eyebrow { color: var(--brand-on-dark); }

.tnum { font-variant-numeric: tabular-nums; }

/* 어두운 배경 위 헤드라인 강조 */
.hl-warm { color: var(--brand-on-dark); }

/* ---------- 배지(원육 기준 등 핵심 소구점) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .48rem .9rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: -.01em;
  border-radius: 2rem; white-space: nowrap;
  background: var(--brand-tint); color: var(--brand);
  border: 1px solid rgba(21,85,162,.16);
}
.badge-dark {
  background: rgba(255,255,255,.10); color: #fff;
  border-color: rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.badge-solid { background: var(--brand); color: #fff; border-color: var(--brand); }
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .75; }

/* ---------- 기준 카드 (암퇘지 · 1등급 이상) ---------- */
.criteria {
  position: relative; overflow: hidden;
  padding: 2.25rem 1.75rem;
  border-radius: 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s ease;
}
.criteria:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(21,85,162,.25); }
.criteria::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--brand); transform: scaleY(0); transform-origin: top;
  transition: transform .55s var(--ease-out);
}
.criteria:hover::before { transform: scaleY(1); }
.criteria-mark {
  font-family: 'Instrument Serif', serif; font-size: 3.25rem; line-height: .9;
  color: var(--brand); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
@media (min-width: 768px) { .criteria { padding: 2.75rem 2.25rem; } }

/* ---------- 체크 목록 (손질 기준) ---------- */
.checklist { display: grid; gap: 0; border-bottom: 1px solid var(--line); }
.checklist li {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: .9rem;
  align-items: start; padding: 1rem 0;
  border-top: 1px solid var(--line);
  font-size: .9375rem; line-height: 1.7;
}
.on-dark .checklist, .surface-dark .checklist { border-bottom-color: rgba(255,255,255,.12); }
.checklist li::before {
  content: ''; margin-top: .42em;
  width: 1.4rem; height: 1.4rem; margin-top: .1em;
  border-radius: 50%; background: var(--brand-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231555A2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.on-dark .checklist li, .surface-dark .checklist li { border-color: rgba(255,255,255,.12); }
.on-dark .checklist li::before, .surface-dark .checklist li::before {
  background-color: rgba(126,196,232,.18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237EC4E8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 7'/%3E%3C/svg%3E");
}

/* ---------- 질감: 필름 그레인 ---------- */
.grain { position: relative; isolation: isolate; }
.grain::before {
  content: ''; position: absolute; inset: 0; z-index: var(--z-grain);
  pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.grain > * { position: relative; z-index: 2; }

/* 밝은 면에서는 곱하기로 살짝만 */
.grain-light::before { mix-blend-mode: multiply; opacity: .28; }

/* ---------- 면(surface) ---------- */
.surface-dark {
  background: var(--dark);
  color: rgba(255,255,255,.82);
}
.surface-dark h1, .surface-dark h2, .surface-dark h3, .surface-dark strong { color: #fff; }

.surface-warm { background: var(--paper-warm); }

/* 밝은 페이지 안에서 대비가 필요할 때 — 급격한 검정 대신 같은 팔레트의 진한 톤 */
.surface-tint { background: var(--brand-tint); }

/* 얇은 구분선 */
.rule { height: 1px; background: var(--line); border: 0; }
.on-dark .rule, .surface-dark .rule { background: rgba(255,255,255,.12); }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; line-height: 1;
  border-radius: .8rem; padding: 1.05rem 1.75rem;
  transition: transform .2s var(--ease-spring), background-color .22s ease,
              box-shadow .28s var(--ease-out), color .22s ease, border-color .22s ease;
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(.985); }

.btn-primary {
  background: var(--brand); color: #fff;
  box-shadow: 0 10px 26px -12px rgba(21,85,162,.75);
}
.btn-primary:hover {
  background: var(--brand-soft); transform: translateY(-2px);
  box-shadow: 0 18px 38px -14px rgba(21,85,162,.8);
}
.btn-primary:active { transform: translateY(0) scale(.985); }

.btn-paper {
  background: #fff; color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.btn-paper:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-paper:active { transform: translateY(0) scale(.985); }

.btn-outline {
  border: 1px solid var(--line); color: var(--ink); background: transparent;
}
.btn-outline:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }

.on-dark .btn-outline, .surface-dark .btn-outline {
  border-color: rgba(255,255,255,.28); color: #fff;
}
.on-dark .btn-outline:hover, .surface-dark .btn-outline:hover {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.5); color: #fff;
}

/* 텍스트 링크 — 밑줄이 hover 시 자라남 */
.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; color: var(--brand);
  position: relative; padding-bottom: 2px;
}
.link-arrow::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: currentColor; transition: width .35s var(--ease-out);
}
.link-arrow:hover::after { width: 100%; }
.link-arrow svg { transition: transform .3s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.on-dark .link-arrow, .surface-dark .link-arrow { color: var(--brand-on-dark); }

/* ---------- 헤더 ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
  /* 로고가 항상 또렷하게 보이도록 헤더는 처음부터 불투명하게 둡니다 */
  background: rgba(248,250,252,.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
}
.site-header .bar { transition: height .35s var(--ease-out); height: 5.25rem; }
.site-header.is-scrolled {
  background: rgba(248,250,252,.95);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px -12px rgba(16,30,50,.4);
}
.site-header.is-scrolled .bar { height: 4.25rem; }

/* 명함 원본에서 추출한 실제 로고 */
.site-logo {
  height: 2.2rem; width: auto; display: block;
  transition: height .35s var(--ease-out);
}
.site-header.is-scrolled .site-logo { height: 1.85rem; }
@media (max-width: 400px) { .site-logo { height: 1.85rem; } }

.brand-mark {
  font-weight: 800; letter-spacing: -.045em; color: var(--brand);
  transition: color .35s ease;
}
.brand-sub { color: var(--ink-mute); transition: color .35s ease; }

.nav-link {
  position: relative; font-weight: 600; color: var(--ink-soft);
  transition: color .22s ease; padding: .35rem 0;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--brand);
  transform: scaleX(0); transform-origin: right;
  transition: transform .38s var(--ease-out);
}
.nav-link:hover { color: var(--brand); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link[aria-current="page"] { color: var(--brand); }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.site-header.over-hero:not(.is-scrolled) .nav-link[aria-current="page"] { color: #fff; }

/* 모바일 메뉴 */
.mobile-menu {
  overflow: hidden; max-height: 0;
  transition: max-height .42s var(--ease-out);
  background: var(--paper);
  border-top: 1px solid transparent;
}
.mobile-menu.is-open { max-height: 24rem; border-top-color: var(--line); }
.mobile-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .95rem .25rem; font-weight: 600; color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-of-type { border-bottom: 0; }
.mobile-menu a[aria-current="page"] { color: var(--brand); }

.menu-btn { transition: color .35s ease; }
.menu-btn span {
  display: block; width: 22px; height: 1.75px; background: currentColor;
  border-radius: 2px; transition: transform .35s var(--ease-out), opacity .2s ease;
}
.menu-btn span + span { margin-top: 5px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.75px) rotate(-45deg); }

/* ---------- 스크롤 등장 모션 ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal="left"]  { transform: translate3d(-24px, 0, 0); }
[data-reveal="right"] { transform: translate3d(24px, 0, 0); }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- 히어로 ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 100dvh;
  display: flex; align-items: flex-end;
  background: var(--dark);
}
.hero-media {
  position: absolute; inset: 0;
  background: url('../images/opt/hero-main.jpg') center 42% / cover no-repeat;
  transform: scale(1.06);
  animation: heroIn 2.4s var(--ease-out) forwards;
}
@keyframes heroIn { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero-media { animation: none; transform: none; } }

.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(15,10,9,.94) 0%, rgba(15,10,9,.78) 34%, rgba(15,10,9,.28) 64%, rgba(15,10,9,.45) 100%),
    radial-gradient(120% 80% at 12% 100%, rgba(21,85,162,.34) 0%, transparent 62%);
}

.scroll-cue {
  width: 1px; height: 56px; background: rgba(255,255,255,.22);
  position: relative; overflow: hidden;
}
.scroll-cue::after {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 40%;
  background: #fff; animation: cue 2.2s var(--ease-out) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(250%); }
  100% { transform: translateY(250%); }
}
@media (prefers-reduced-motion: reduce) { .scroll-cue::after { animation: none; } }

/* ---------- 강점 리스트 (카드 대신 편집형 행) ---------- */
.strength {
  position: relative; display: grid;
  grid-template-columns: 3.25rem 1fr;
  column-gap: 1rem; row-gap: .7rem;
  padding: 2rem 1rem 2rem 0;
  border-top: 1px solid var(--line);
  transition: background-color .4s var(--ease-out), padding-left .4s var(--ease-out);
}
.strength:last-child { border-bottom: 1px solid var(--line); }
.strength::before {
  content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
  background: var(--brand); transition: width .6s var(--ease-out);
}
.strength:hover::before { width: 100%; }
.strength:hover { background: linear-gradient(90deg, var(--brand-tint), transparent 72%); padding-left: 1.25rem; }

.strength-no {
  grid-column: 1; grid-row: 1;
  font-family: 'Instrument Serif', serif; font-size: 2.25rem; line-height: .95;
  color: var(--line); font-variant-numeric: tabular-nums;
  transition: color .4s ease;
}
.strength:hover .strength-no { color: var(--brand); }
.strength > h3 { grid-column: 2; grid-row: 1; align-self: center; }
.strength > p  { grid-column: 2; grid-row: 2; }

@media (min-width: 900px) {
  .strength {
    grid-template-columns: 4.5rem minmax(9rem, 13rem) 1fr;
    column-gap: 2rem; align-items: start;
    padding-block: 2.75rem;
  }
  .strength-no { font-size: 3rem; }
  .strength > h3 { grid-column: 2; grid-row: 1; align-self: start; }
  .strength > p  { grid-column: 3; grid-row: 1; }
}

/* ---------- 제품 벤토 타일 ---------- */
.tile {
  position: relative; display: block; overflow: hidden;
  border-radius: 1.25rem; background: var(--dark);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .45s var(--ease-out), transform .45s var(--ease-out);
}
.tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1s var(--ease-out), opacity .5s ease;
}
.tile:hover img { transform: scale(1.07); }
.tile-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,12,10,.92) 0%, rgba(18,12,10,.45) 42%, rgba(18,12,10,0) 78%);
  transition: opacity .45s ease;
}
.tile:hover .tile-veil { opacity: .88; }
.tile-body { position: absolute; inset: auto 0 0 0; padding: 1.5rem; color: #fff; }
@media (min-width: 768px) { .tile-body { padding: 2rem; } }
.tile-tag {
  display: inline-block; padding: .3rem .7rem;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .75rem; font-weight: 700; letter-spacing: .01em;
}

/* ---------- 스펙 표 ---------- */
.spec { border-top: 1px solid var(--line); }
.spec-row {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem;
  padding: .95rem .25rem; border-bottom: 1px solid var(--line);
  font-size: .9375rem; align-items: baseline;
}
.spec-key { font-weight: 700; color: var(--ink-mute); font-size: .8125rem; letter-spacing: .01em; }
@media (min-width: 640px) { .spec-row { grid-template-columns: 7rem 1fr; } }

/* ---------- 프로세스 레일 ---------- */
.step { position: relative; padding-top: 2.25rem; }
.step::before {
  content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px;
  background: var(--line);
}
.step::after {
  content: ''; position: absolute; left: 0; top: -3.5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--brand);
  transform: scale(0); transition: transform .5s var(--ease-spring) var(--d, 0ms);
}
.step.is-in::after { transform: scale(1); }
.step-no {
  font-family: 'Instrument Serif', serif; font-size: 1rem;
  color: var(--brand); font-variant-numeric: tabular-nums;
  display: block; margin-bottom: .6rem;
}

/* ---------- 통계 밴드 ---------- */
.stat-val {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(2.75rem, 6vw, 4rem); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* ---------- 거래처 유형 마퀴 ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.marquee-item {
  display: inline-flex; align-items: center; gap: 1.25rem;
  padding: 0 1.25rem; font-weight: 600; white-space: nowrap;
  color: var(--ink-mute);
}
.marquee-item::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); opacity: .45; }

/* ---------- FAQ (아코디언 대신 정의형 2단 목록) ---------- */
.faq-item {
  display: grid; gap: .6rem; padding: 1.75rem 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) {
  .faq-item { grid-template-columns: 17rem 1fr; gap: 2.5rem; padding: 2rem 0; }
}
.faq-q { font-weight: 700; letter-spacing: -.015em; }
.faq-a { color: var(--ink-soft); line-height: 1.75; }

/* ---------- 폼 ---------- */
.field-label {
  display: block; font-weight: 700; font-size: .8125rem;
  color: var(--ink-soft); margin-bottom: .55rem; letter-spacing: .01em;
}
.field-label .req { color: var(--error); }

.input, .select, .textarea {
  width: 100%; padding: .9rem 1rem;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: .7rem;
  font-size: .9375rem; line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.input::placeholder, .textarea::placeholder { color: #9AA7B4; }
.input:hover, .select:hover, .textarea:hover { border-color: #C4CFDA; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(21,85,162,.12);
}
.textarea { resize: vertical; min-height: 9rem; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%236B7885' stroke-width='1.8'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem;
}

.field-error {
  display: none; align-items: center; gap: .35rem;
  margin-top: .45rem; font-size: .8125rem; font-weight: 600; color: var(--error);
}
.has-error .input, .has-error .select, .has-error .textarea {
  border-color: var(--error); background: #FDF6F5;
}
.has-error .field-error { display: flex; }

/* 부위 선택 칩 */
.chip > span {
  display: inline-block; padding: .6rem 1.1rem;
  border: 1px solid var(--line); border-radius: 2rem;
  font-size: .875rem; font-weight: 600; cursor: pointer;
  background: #fff; color: var(--ink-soft);
  transition: all .22s var(--ease-out);
  user-select: none;
}
.chip > span:hover { border-color: var(--brand); color: var(--brand); }
.chip > input:checked + span {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 6px 16px -8px rgba(21,85,162,.7);
}
.chip > input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 3px; }

.check {
  appearance: none; width: 1.2rem; height: 1.2rem; flex: none;
  border: 1px solid var(--line); border-radius: .3rem; background: #fff;
  cursor: pointer; transition: all .18s ease; position: relative;
}
.check:checked { background: var(--brand); border-color: var(--brand); }
.check:checked::after {
  content: ''; position: absolute; left: .38rem; top: .16rem;
  width: .3rem; height: .58rem; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

/* 전송 중 / 완료 */
.btn[data-busy="true"] { pointer-events: none; opacity: .72; }
.btn[data-busy="true"] .btn-label::after {
  content: ''; display: inline-block; width: .9em; height: .9em; margin-left: .5em;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite; vertical-align: -.1em;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 모바일 하단 고정 액션 바 ---------- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
  display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(248,250,252,.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .4s var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
.action-bar.is-up { transform: translateY(0); }
.action-bar a {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: 1.05rem .5rem; font-weight: 700; font-size: .9375rem;
}
.action-bar a:first-child { color: var(--ink); border-right: 1px solid var(--line); }
.action-bar a:last-child { color: #fff; background: var(--brand); }
@media (min-width: 768px) { .action-bar { display: none; } }

/* ---------- 이미지 프레임 ---------- */
.frame {
  border-radius: 1.25rem; overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--paper-warm);
}
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 이미지 로드 전 잔상 방지 */
img { background-color: var(--paper-warm); }

/* ---------- 푸터 ---------- */
.footer-link {
  color: rgba(255,255,255,.58); transition: color .2s ease;
  display: inline-block; padding: .2rem 0;
}
.footer-link:hover { color: #fff; }