/* ── 초안(Artedesign Landing.dc.html) 원본 스타일 그대로 이식 ───────────────── */
html, body { margin: 0; padding: 0; background: #16130F; }
* { box-sizing: border-box; }
/* 한글은 띄어쓰기 없이도 줄바꿈이 가능해서, 지정 안 하면 브라우저가 단어 중간에서도
   줄을 끊는다("설계하고"가 "설"/"계하고"로 쪼개지는 식) — 좁은 폭의 문단에서도
   항상 단어(어절) 경계에서만 줄바꿈되도록 강제한다. */
body { word-break: keep-all; overflow-wrap: break-word; }
/* PC 브라우저 스크롤바를 상담문의 모달 스크롤바와 같은 톤으로 — 기본 회색 대신 브랜드 컬러 */
html { scrollbar-width: thin; scrollbar-color: #A9714B transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #A9714B; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #8f5f3f; background-clip: padding-box; }
a { color: #16130F; text-decoration: none; }
a:hover { color: #A9714B; }
::selection { background: #A9714B; color: #F6F3EF; }

@keyframes ad-line { 0% { width: 0; opacity: 0 } 25% { opacity: 1 } 55% { width: 300px } 100% { width: 300px } }
@keyframes ad-draw { 0% { stroke-dashoffset: 100 } 100% { stroke-dashoffset: 0 } }
@keyframes ad-arc { 0% { d: path("M 8 44 Q 184 44 352 44") } 100% { d: path("M 8 44 Q 184 6 352 44") } }
@keyframes ad-rise { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: none } }
@keyframes ad-fade { from { opacity: 1 } to { opacity: 0 } }
@keyframes ad-curtain {
  0% { transform: translateY(0); border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
  18% { border-bottom-left-radius: 52% 13vh; border-bottom-right-radius: 52% 13vh }
  100% { transform: translateY(-116%); border-bottom-left-radius: 52% 13vh; border-bottom-right-radius: 52% 13vh }
}
@keyframes ad-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes ad-scrollcue { 0% { transform: scaleY(0); transform-origin: top } 50% { transform: scaleY(1); transform-origin: top } 51% { transform: scaleY(1); transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }

@media (max-width: 860px) {
  header { padding: 18px 22px !important }
  header nav { gap: 16px !important; font-size: 10px !important; letter-spacing: .14em !important }
  header img { height: 30px !important }
  section { padding-left: 22px !important; padding-right: 22px !important }
  [data-hero-copy] { padding: 0 22px 64px !important }
  [data-screen-label="Craft"] [data-reveal] { grid-template-columns: 1fr !important; gap: 14px !important; padding: 38px 0 !important }
  [data-screen-label="About"] > div { gap: 40px !important }
  footer { justify-content: flex-start !important; gap: 14px !important }
}
@media (max-width: 560px) {
  header nav { display: none !important }
  [data-screen-label="Hero"] [data-hero-copy] > div:last-of-type { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important }
  /* Shorts 아래·Works 위 padding이 각각 14vh/16vh라 모바일에서는 둘이 합쳐 너무 큰
     빈 공간이 생긴다 — 모바일에서만 확 줄인다. */
  #shorts { padding-top: 7vh !important; padding-bottom: 6vh !important; }
  #works { padding-top: 6vh !important; }
  /* Works가 1열로 쌓이는 모바일에서는 마지막 카드의 밑줄 바로 아래에 Process 섹션의
     상단 구분선이 또 나와서 선 두 개가 어정쩡한 간격을 두고 겹쳐 보인다 — Process
     쪽 선은 모바일에서만 없앤다(카드 밑줄이 이미 그 역할을 하고 있어서 충분하다). */
  [data-screen-label="Process"] > div { border-top: none !important; }
}

/* ── 미디어 슬롯 빈 상태(플레이스홀더) ─────────────────────────────────────── */
.media-slot { position: relative; }
.media-slot-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #6E655B; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 12px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px);
}

/* ── 관리자 모드: 편집 가능 영역 표시 ──────────────────────────────────────── */
body.admin-mode [data-field] { cursor: text; border-radius: 2px; transition: outline-color .12s, background-color .12s; outline: 1px dashed transparent; outline-offset: 3px; }
body.admin-mode [data-field]:hover { outline-color: rgba(169,113,75,.85); background-color: rgba(169,113,75,.08); }
body.admin-mode [data-field].ad-editing { outline: 2px solid #A9714B; outline-offset: 3px; background-color: rgba(169,113,75,.12); cursor: text; }
/* 문단형(data-multiline) 필드는 편집 모드로 들어가는 즉시 자동으로 넓게 펼쳐진다 —
   좁은 원래 레이아웃 폭(인라인 style의 max-width) 안에 갇힌 채로 긴 문단을 편집하면
   불편해서, 편집 중에는 화면 대부분 너비를 쓰도록 확장한다. 실제 방문자에게 보이는
   폭은 편집이 끝나면(blur) 그대로 원래 값으로 복원된다.
   대부분 flex 컨테이너의 자식이라 flex-grow/shrink와 align-items:stretch가 폭을
   다시 좁게 계산해버려서, flex 계산에서 완전히 빼야 확장한 폭이 실제로 유지된다.
   (손으로 드래그하는 resize 손잡이는 클릭 영역이 너무 작아 오히려 편집모드가
   꺼지는 실수를 유발해서 빼고, 자동 확장만 남겼다.) */
body.admin-mode [data-multiline="1"].ad-editing {
  max-width: min(92vw, 960px) !important; min-width: 160px;
  flex: none !important; align-self: flex-start !important; display: block !important;
}
body.admin-mode .media-slot { cursor: pointer; }
body.admin-mode .media-slot:hover::before {
  content: ''; position: absolute; inset: 0; z-index: 5; background: rgba(22,19,15,.35); outline: 2px dashed #A9714B; outline-offset: -2px; pointer-events: none;
}

.ad-badge {
  position: fixed; z-index: 9500; display: none; align-items: center; gap: 6px;
  background: #16130F; color: #F6F3EF; font: 500 11px/1 system-ui, -apple-system, sans-serif;
  padding: 6px 10px; border-radius: 6px; pointer-events: none; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.ad-badge.show { display: flex; }

.ad-toast-wrap { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ad-toast {
  background: #16130F; color: #F6F3EF; font: 500 12px/1.4 system-ui, -apple-system, sans-serif;
  padding: 10px 18px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.ad-toast.show { opacity: 1; transform: translateY(0); }
.ad-toast.error { background: #7A2C22; }

.ad-media-spinner {
  position: absolute; inset: 0; z-index: 8; display: none; align-items: center; justify-content: center; background: rgba(22,19,15,.55);
}
.ad-media-spinner.show { display: flex; }
.ad-media-spinner::after {
  content: ''; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(246,243,239,.3); border-top-color: #F6F3EF; animation: ad-spin .7s linear infinite;
}
@keyframes ad-spin { to { transform: rotate(360deg); } }

/* ── 관리자 로그인 모달 ────────────────────────────────────────────────────── */
.ad-modal { position: fixed; inset: 0; z-index: 9800; display: flex; align-items: center; justify-content: center; background: rgba(15,13,11,.6); }
.ad-modal[hidden] { display: none; }
.ad-modal { opacity: 0; transition: opacity .28s ease; }
.ad-modal.show { opacity: 1; }
.ad-modal-panel { width: min(340px, 88vw); background: #F6F3EF; border-radius: 10px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.ad-modal-panel { transform: translateY(14px) scale(.97); transition: transform .32s cubic-bezier(.16,1,.3,1); }
.ad-modal.show .ad-modal-panel { transform: translateY(0) scale(1); }
.ad-modal-panel h3 { margin: 0 0 18px; font-family: 'Noto Serif KR', serif; font-weight: 400; font-size: 18px; color: #16130F; }
.ad-modal-panel input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; margin-bottom: 10px; border: 1px solid #D6CCBF; border-radius: 6px;
  font: 14px/1.4 system-ui, -apple-system, sans-serif; background: #fff; color: #16130F;
}
.ad-modal-panel input:focus { outline: none; border-color: #A9714B; }
.ad-modal-error { color: #A3372A; font-size: 12px; margin: -2px 0 10px; }
.ad-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.ad-modal-actions button {
  border: none; border-radius: 999px; padding: 10px 20px; font: 500 12px/1 system-ui, -apple-system, sans-serif; cursor: pointer;
}
.ad-modal-actions button[type="submit"] { background: #16130F; color: #F6F3EF; }
.ad-modal-actions button[type="button"] { background: transparent; color: #6E655B; }

.ad-footer-trigger { background: none; border: none; padding: 6px; cursor: pointer; color: #332D26; font-size: 10px; opacity: .4; }
.ad-footer-trigger:hover { opacity: .8; }
.ad-logout-link { color: #A9714B !important; font-size: 11px; letter-spacing: .04em; }

/* ── Works 갤러리 모달 ─────────────────────────────────────────────────────── */
/* 썸네일(사진) 영역만 갤러리 모달을 열고, 아래 텍스트는 별개로 클릭해 바로 수정할 수 있다. */
.work-thumb { cursor: pointer; }
.step-icon {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: #A9714B; color: #F6F3EF;
}
/* 아치형 상단 곡선 안쪽이라 위쪽에 배지를 두면 곡선에 어색하게 걸린다 — 곡선이 없는
   아래쪽 모서리에 둔다. */
.work-card-icon {
  position: absolute; bottom: 14px; left: 14px; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  background: rgba(22,19,15,.55); color: #F6F3EF; backdrop-filter: blur(3px);
}
.work-modal { position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center; background: rgba(10,9,7,.92); }
/* 모달 등장 애니메이션 — 배경은 바로 어두워지고, 패널만 살짝 아래·작은 상태에서 부드럽게 확대되며 나타난다. */
.work-modal { opacity: 0; transition: opacity .28s ease; }
.work-modal.show { opacity: 1; }
.work-modal .work-modal-viewport, .work-modal .work-modal-close, .work-modal .work-modal-title {
  transform: translateY(14px) scale(.97); opacity: 0; transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .32s ease;
}
.work-modal.show .work-modal-viewport, .work-modal.show .work-modal-close, .work-modal.show .work-modal-title {
  transform: translateY(0) scale(1); opacity: 1;
}
.work-modal[hidden] { display: none; }
.work-modal-close {
  position: absolute; top: 22px; right: 28px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(246,243,239,.4);
  background: transparent; color: #F6F3EF; font-size: 18px; cursor: pointer; z-index: 2;
}
.work-modal-title { position: absolute; top: 26px; left: 28px; color: #F6F3EF; font: 300 14px/1.3 'Noto Serif KR', serif; letter-spacing: .04em; z-index: 2; }
/* Swiper 기반 캐러셀 — 이미지는 자기 비율 그대로 표시되고(letterbox 없음),
   슬라이드 높이는 autoHeight로 매번 실제 이미지 크기에 맞춰진다. */
.work-modal-viewport {
  width: min(760px, 88vw); max-width: 92vw; position: relative; touch-action: pan-y;
  --swiper-navigation-size: 20px; --swiper-navigation-color: #F6F3EF; --swiper-pagination-color: #A9714B;
  --swiper-pagination-bullet-inactive-color: #F6F3EF; --swiper-pagination-bullet-inactive-opacity: .45;
}
.work-modal-viewport .swiper-slide { display: flex; align-items: center; justify-content: center; }
.work-modal-viewport .swiper-slide img {
  display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto; margin: 0 auto;
  border-radius: 4px; user-select: none; -webkit-user-drag: none;
}
.work-modal-empty { color: #8B8278; font: 300 14px 'Noto Serif KR', serif; text-align: center; padding: 60px 20px; }

/* 좌우 화살표는 이미지 좌우 가장자리 위에 겹쳐서 뜬다 (요청사항) */
.work-modal-arrow.swiper-button-next, .work-modal-arrow.swiper-button-prev {
  width: 42px; height: 42px; border-radius: 50%; background: rgba(22,19,15,.6); backdrop-filter: blur(2px);
  transition: background-color .15s;
}
.work-modal-arrow.swiper-button-next:hover, .work-modal-arrow.swiper-button-prev:hover { background: rgba(169,113,75,.9); }
.work-modal-arrow.swiper-button-prev { left: 10px; }
.work-modal-arrow.swiper-button-next { right: 10px; }
.work-modal-viewport .swiper-button-disabled { opacity: .3; }
@media (max-width: 640px) {
  .work-modal-arrow.swiper-button-next, .work-modal-arrow.swiper-button-prev { width: 36px; height: 36px; }
}
.work-modal-viewport .swiper-pagination { position: static; margin-top: 14px; }

/* 관리자 전용: 사진 추가(여러 장)/삭제/순서변경 UI */
.ad-slide-controls {
  position: absolute; top: 10px; right: 10px; display: none; gap: 6px; z-index: 3;
}
body.admin-mode .ad-slide-controls { display: flex; }
.ad-slide-controls button {
  width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; cursor: pointer;
}
.ad-slide-controls button:hover { background: rgba(169,113,75,.9); }
.ad-slide-controls button[data-act="cover"] { background: rgba(169,113,75,.85); }
.ad-cover-badge {
  position: absolute; top: 10px; left: 10px; z-index: 3; background: rgba(169,113,75,.92); color: #16130F;
  font: 600 11px/1 system-ui, -apple-system, sans-serif; padding: 6px 10px; border-radius: 999px;
}
.work-modal-add-tile {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 320px;
  border: 1px dashed rgba(246,243,239,.4); color: #D8CFC4; font-size: 12px; text-align: center; padding: 20px; cursor: pointer; background: transparent;
}
body.admin-mode .work-modal-add-tile { display: flex; }
.work-modal-add-tile.uploading { opacity: .5; pointer-events: none; }
.work-modal-add-tile span.plus { font-size: 26px; line-height: 1; }
.work-modal-add-tile input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ── 우측 하단 플로팅 버튼(카카오채널 / 상담문의 / 전화) ───────────────────── */
.fab-stack { position: fixed; right: 22px; bottom: 22px; z-index: 700; display: flex; flex-direction: column; gap: 12px; }
.fab-btn {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #16130F; color: #F6F3EF; border: 1px solid rgba(246,243,239,.15); cursor: pointer;
  box-shadow: 0 8px 24px rgba(22,19,15,.35); font-size: 22px; transition: background-color .15s, transform .15s;
}
.fab-btn:hover { background: #A9714B; color: #16130F; transform: translateY(-2px); }
.fab-btn i { line-height: 1; }
.fab-phone { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .fab-phone-tip {
    position: absolute; right: 62px; top: 50%; transform: translateY(-50%) translateX(6px);
    background: #16130F; color: #F6F3EF; padding: 8px 14px; border-radius: 999px; font-size: 13px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; box-shadow: 0 8px 20px rgba(0,0,0,.3);
  }
  .fab-phone:hover .fab-phone-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
}
@media not all and (hover: hover) { .fab-phone-tip { display: none; } }
@media (max-width: 560px) {
  .fab-stack { right: 14px; bottom: 14px; gap: 10px; }
  .fab-btn { width: 46px; height: 46px; font-size: 19px; }
}

/* ── 상담문의 모달 ─────────────────────────────────────────────────────────── */
/* 데스크톱: 필드를 2열 그리드로 배치해서 세로 스크롤을 최소화한다.
   모바일: 1열로 쌓고 스크롤은 그대로 두되, 스크롤바 자체를 가늘고 눈에 덜 띄게 만든다. */
.inquiry-panel { width: min(720px, 94vw); max-height: 86vh; overflow-y: auto; position: relative; text-align: left; }
.inquiry-panel { scrollbar-width: thin; scrollbar-color: #D6CCBF transparent; }
.inquiry-panel::-webkit-scrollbar { width: 7px; }
.inquiry-panel::-webkit-scrollbar-track { background: transparent; }
.inquiry-panel::-webkit-scrollbar-thumb { background: #D6CCBF; border-radius: 999px; }
.inquiry-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 16px; cursor: pointer; color: #6E655B; }
.inquiry-sub { margin: 0 0 18px; font-size: 13px; color: #6E655B; }
.inquiry-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.inquiry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.inquiry-field { display: block; margin-bottom: 14px; }
.inquiry-field-full { grid-column: 1 / -1; }
.inquiry-label { display: block; font-size: 12px; color: #4A423A; margin-bottom: 6px; letter-spacing: .02em; }
.inquiry-field input, .inquiry-field textarea {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border: 1px solid #D6CCBF; border-radius: 6px;
  font: 14px/1.5 'Noto Sans KR', sans-serif; background: #fff; color: #16130F; resize: vertical;
}
.inquiry-field input:focus, .inquiry-field textarea:focus { outline: none; border-color: #A9714B; }
@media (max-width: 640px) {
  .inquiry-grid { grid-template-columns: 1fr; }
}
.inquiry-consent { margin: 6px 0 16px; }
.inquiry-consent-text {
  font-size: 11px; line-height: 1.7; color: #6E655B; background: #F6F3EF; border-radius: 6px;
  padding: 12px 14px; margin-bottom: 10px;
}
.inquiry-consent-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #16130F; cursor: pointer; }
.inquiry-consent-check input { width: 16px; height: 16px; accent-color: #A9714B; flex-shrink: 0; }
.inquiry-success { background: #EEF6EE; color: #2E5B2E; padding: 12px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 6px; }
#inquiry-submit:disabled { opacity: .6; cursor: not-allowed; }