/* 蘭庭 — 공통 디자인 토큰 & 컴포넌트 스타일
   원본 JSX의 색상/타이포/모션을 그대로 옮김 */
:root {
  --bg: #1C1A17;
  --surface: #26231F;
  --surface2: #2E2A25;
  --ivory: #F2ECE1;
  --muted: #9C9486;
  --line: #3A352E;
  --jade: #86B29A;
  --jadeDim: #5E8A72;
  --brass: #B08D57;
  --red: #cf887e;
  --serif: 'Noto Serif SC', 'Songti SC', serif;
  --sans: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background-color: var(--bg);
  /* 프리미엄: 상단 brass / 하단 jade 의 은은한 비네팅 (고정) */
  background-image:
    radial-gradient(120% 80% at 50% -12%, rgba(176,141,87,0.07), transparent 60%),
    radial-gradient(110% 60% at 50% 112%, rgba(134,178,154,0.05), transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-family: var(--sans);
  color: var(--ivory);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }
a { text-decoration: none; color: inherit; }

/* 이미지 저장 방지: 드래그·선택·길게눌러 메뉴 차단 (전 페이지) */
img {
  -webkit-user-drag: none;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* 라이트박스 확대(클릭 토글) — 다운로드는 막되 확대는 허용 */
#lbImg { cursor: zoom-in; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
#lbImg.oc-zoom { transform: scale(1.9); cursor: zoom-out; }

/* 포커스 가시성 (접근성 + 프리미엄) */
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 8px; }

/* 본문 진입 페이드 */
@keyframes ocFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.oc-enter { animation: ocFade .55s cubic-bezier(.2,.7,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ── 모션 / 인터랙션 ───────────────────────── */
@keyframes shk {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes glow {
  0%   { box-shadow: 0 0 0 0 rgba(134,178,154,.5); }
  100% { box-shadow: 0 0 0 14px rgba(134,178,154,0); }
}
.animate-ping { animation: ping 1.4s cubic-bezier(0,0,.2,1) infinite; }

.oc-im { background: linear-gradient(135deg, #2E2A25, #1f1c18); }

.oc-pbtn { transition: transform .18s, box-shadow .3s, filter .3s; }
.oc-pbtn:hover { filter: brightness(1.1); box-shadow: 0 12px 30px rgba(94,138,114,.5); }
.oc-pbtn:active { transform: scale(.95); }

.oc-ghost { transition: all .25s; }
.oc-ghost:hover { border-color: var(--brass) !important; color: var(--brass) !important; }

.oc-ibtn { transition: all .22s; }
.oc-ibtn:hover { border-color: var(--brass) !important; color: var(--brass) !important; background: #2c2823 !important; }

.oc-cbtn { transition: all .2s; }
.oc-cbtn:hover { color: var(--brass) !important; border-color: var(--brass) !important; }

.oc-input:focus-within { border-color: var(--brass) !important; }

/* 카드 호버 (랜딩) */
.oc-card { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.oc-card:hover { transform: translateY(-6px); }
.oc-imgwrap { position: relative; transition: box-shadow .4s, border-color .4s; }
.oc-card:hover .oc-imgwrap { box-shadow: 0 24px 50px rgba(0,0,0,.5); border-color: var(--brass) !important; }
.oc-img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.oc-card:hover .oc-img { transform: scale(1.06); }

/* 어드민 행 */
.oc-row { transition: background .25s, box-shadow .25s; }
.oc-row:hover { background: #322d27 !important; }
.oc-row .oc-bar { transition: opacity .25s; }
.oc-row:hover .oc-bar { opacity: 1; }

/* 상세 히어로 / 갤러리 */
.oc-hero { transition: box-shadow .4s; }
.oc-hero:hover { box-shadow: 0 30px 70px rgba(0,0,0,.55); }
.oc-hero img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.oc-hero:hover img { transform: scale(1.04); }
.oc-gthumb { transition: transform .35s, box-shadow .35s, border-color .35s; }
.oc-gthumb:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.45); border-color: var(--brass) !important; }
.oc-gthumb img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.oc-gthumb:hover img { transform: scale(1.08); }
.oc-book { transition: all .3s; }
.oc-book:hover { background: var(--brass); color: #1b160d; box-shadow: 0 12px 30px rgba(176,141,87,.4); }

select.oc-sel { appearance: none; -webkit-appearance: none; }

/* ════════════════════════════════════════════
   모바일 최적화 (≤640px)
   인라인 스타일을 덮어쓰기 위해 일부 !important 사용
   ════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* 헤더 여백 컴팩트 + 안전영역(노치) */
  header {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-top: 16px !important; padding-bottom: 16px !important;
  }
  /* 본문 좌우 여백 살짝 축소 */
  main { padding-left: 18px !important; padding-right: 18px !important; }

  /* 입장/로그인 카드: 패딩 축소 */
  .oc-authcard { padding: 38px 22px 28px !important; }

  /* ── 헤더: 부제·구분선 숨기고 브랜드/네비를 한 줄로 유지 ── */
  .hd-sub { display: none !important; }                 /* 管理后台·ADMIN / 入场码·CODES + 구분선 */
  .hd-brand { white-space: nowrap !important; }
  .hd-nav { gap: 6px !important; flex-wrap: nowrap !important; }
  .hd-nav > * {
    padding: 7px 10px !important; font-size: 11px !important;
    white-space: nowrap !important; flex-shrink: 0 !important;
  }

  /* ── 페이지 제목줄: 글자 줄바꿈 금지(넘치면 블록 단위로만 줄바꿈) ── */
  .pg-head { flex-wrap: wrap !important; gap: 8px 12px !important; }
  .pg-head-left { flex-wrap: wrap !important; gap: 4px 10px !important; min-width: 0 !important; }
  .pg-title { font-size: 19px !important; white-space: nowrap !important; }
  .pg-counts { flex-shrink: 0 !important; font-size: 11px !important; white-space: nowrap !important; }
  .pg-counts > span { white-space: nowrap !important; }
  .pg-action { padding: 9px 13px !important; font-size: 12.5px !important; white-space: nowrap !important; flex-shrink: 0 !important; }

  /* 어드민 기사 행: 드래그 핸들·상태 텍스트 숨기고 간격 축소 */
  .oc-arow { gap: 10px !important; }
  .oc-arow .oc-grip, .oc-arow .oc-worklabel { display: none !important; }
  .oc-arow .oc-ibtn { width: 34px !important; height: 34px !important; }
  /* 이름/시술분야: 세로 글자깨짐 방지 — 각각 가로 한 줄(넘치면 …) */
  .arow-info { flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; }
  .arow-div { display: none !important; }
  .arow-name, .arow-spec { white-space: nowrap !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .arow-spec { font-size: 11px !important; }

  /* 코드 목록: 코드/날짜는 각각 한 줄, 상태·접속·작废은 한 줄에 모음(가로 유지) */
  .oc-crow { gap: 6px 12px !important; padding-top: 14px !important; padding-bottom: 14px !important; }
  .oc-crow > div { min-width: 0 !important; }
  .oc-crow .code-head { flex-basis: 100% !important; }
  .oc-crow .code-dates { flex-basis: 100% !important; }
  .oc-crow .code-dates > span { white-space: nowrap !important; }
  .oc-crow .code-access { flex: 0 0 auto !important; }       /* 늘어나지 않고 내용 크기만큼 */
  .oc-crow .code-access > * { white-space: nowrap !important; } /* 登录N次 / 未登录 가로 고정 */

  /* 마스터 코드: 줄바꿈 + 축소 */
  .oc-mcode { font-size: 17px !important; letter-spacing: 0.1em !important; word-break: break-all; }

  /* 라이트박스 네비 버튼을 가장자리에 고정 */
  .oc-lb-prev, .oc-lb-next { position: fixed !important; top: 50% !important; transform: translateY(-50%); z-index: 60; }
  .oc-lb-prev { left: 4px !important; }
  .oc-lb-next { right: 4px !important; }
}

/* 아주 작은 화면 (≤380px) 추가 보정 */
@media (max-width: 380px) {
  .oc-authcard { padding: 32px 18px 24px !important; }
}

/* 터치 디바이스: hover 리프트 제거 (탭 시 끈적임 방지) */
@media (hover: none) {
  .oc-card:hover { transform: none; }
  .oc-card:hover .oc-imgwrap { box-shadow: none; }
  .oc-gthumb:hover { transform: none; box-shadow: none; }
}