/* ==========================================================================
   LifeMoment 공통 디자인 시스템 (정본: docs/DESIGN_SPEC.md)
   - 고객 사진 페이지(download.html) / 행사 앨범(album.html) / 관리자 콘솔이 공유한다.
   - 밝은 종이 톤 + iOS 감성 + 인생네컷(인화지) 모티프. 다크 테마·네온·움직이는 배경은 제거했다.
   - 외부 폰트 CDN 사용 금지(폐쇄망 NAS 환경) — 시스템 폰트만 사용.
   - 인라인 style 속성을 쓰지 않는 대신, JS 에서 CSS 변수(--lm-value 등)를 바꿔 제어한다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 토큰 (DESIGN_SPEC §1 — 이름 변경 금지)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* 배경 — 따뜻한 종이색 */
  --lm-bg: #F6F4F0;
  --lm-bg-2: #EFECE6;           /* 섹션 구분용 한 단계 진한 배경 */
  --lm-surface: #FFFFFF;        /* 카드 */
  --lm-surface-2: #F7F5F2;      /* 카드 안 보조 영역 */
  --lm-surface-sunken: #EDEAE4; /* 입력 배경, 트랙 */

  /* 반투명 재질 (툴바/상단바) — iOS 머티리얼 */
  --lm-material: rgba(255, 255, 255, .72);
  --lm-material-blur: saturate(180%) blur(20px);

  /* 글자 */
  --lm-text: #16161A;
  --lm-text-2: #6E6E76;
  --lm-text-3: #A0A0A8;
  --lm-text-inv: #FFFFFF;

  /* 선 */
  --lm-border: rgba(22, 22, 26, .10);
  --lm-border-strong: rgba(22, 22, 26, .18);
  --lm-separator: rgba(22, 22, 26, .08);

  /* 틴트 — 인화지 코랄. 관리자 설정에서 덮어쓴다 */
  --lm-primary: #FF4D6D;
  --lm-primary-weak: rgba(255, 77, 109, .12);
  --lm-primary-press: #E53F5E;   /* 누름 상태 */
  --lm-accent: #FF9F45;          /* 보조 강조(배지·그래프 2계열) */

  /* 상태 */
  --lm-ok: #2FB36A;
  --lm-warn: #F0A020;
  --lm-danger: #E5484D;
  --lm-info: #3B82F6;
  --lm-ok-weak: rgba(47, 179, 106, .12);
  --lm-warn-weak: rgba(240, 160, 32, .14);
  --lm-danger-weak: rgba(229, 72, 77, .12);

  /* 모서리 — iOS continuous 느낌 */
  --lm-r-xs: 10px;
  --lm-r-sm: 14px;
  --lm-r: 20px;
  --lm-r-lg: 28px;
  --lm-r-xl: 36px;
  --lm-r-pill: 999px;

  /* 그림자 — 2겹, 아주 은은하게 */
  --lm-shadow-sm: 0 1px 2px rgba(22, 22, 26, .05), 0 1px 1px rgba(22, 22, 26, .03);
  --lm-shadow: 0 1px 3px rgba(22, 22, 26, .06), 0 8px 24px rgba(22, 22, 26, .07);
  --lm-shadow-lg: 0 2px 6px rgba(22, 22, 26, .07), 0 18px 48px rgba(22, 22, 26, .10);
  /* 인화지 그림자 — 사진 전용, 살짝 더 또렷하게 */
  --lm-shadow-print: 0 1px 2px rgba(22, 22, 26, .10), 0 10px 28px rgba(22, 22, 26, .14);

  /* 모션 — iOS 스프링 */
  --lm-ease: cubic-bezier(.32, .72, 0, 1);
  --lm-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --lm-dur: .28s;
  --lm-dur-fast: .16s;

  /* 여백 스케일 */
  --lm-gap-xs: 6px; --lm-gap-sm: 10px; --lm-gap: 16px; --lm-gap-lg: 24px; --lm-gap-xl: 36px;

  /* 파생 토큰 (내부용 · 호환용) */
  --lm-pad: 20px;
  /* 구버전 파일이 아직 참조하는 이름. 그라디언트는 금지이므로 틴트 단색으로 고정한다. */
  --lm-grad: linear-gradient(135deg, var(--lm-primary), var(--lm-primary));
  --lm-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo",
    "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif;
  --lm-z-modal: 60;
  --lm-z-lightbox: 80;
  --lm-z-toast: 100;
}

/* --------------------------------------------------------------------------
   2. 리셋 & 기본 타이포 (한국어 가독성 우선)
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--lm-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  /* 움직이는 그라디언트 오브는 삭제되었다 — 단색 종이 배경. */
  background: var(--lm-bg);
  color: var(--lm-text);
  font-family: var(--lm-font);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -.003em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg,
canvas,
video {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.3;
  letter-spacing: -.015em;
  font-weight: 750;
}

p {
  margin: 0;
}

a {
  color: var(--lm-text);
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* 포커스 규칙 (DESIGN_SPEC §5) */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--lm-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection {
  background: color-mix(in srgb, var(--lm-primary) 22%, transparent);
  color: var(--lm-text);
}

/* 얇고 은은한 스크롤바 */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(22, 22, 26, .20) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: rgba(22, 22, 26, .18);
  border-radius: var(--lm-r-pill);
  border: 3px solid transparent;
  background-clip: padding-box;
}

/* --------------------------------------------------------------------------
   3. 타이포 클래스 (DESIGN_SPEC §2)
   -------------------------------------------------------------------------- */
.lm-title-lg {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.22;
  color: var(--lm-text);
}

.lm-title {
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -.015em;
  line-height: 1.32;
  color: var(--lm-text);
}

.lm-title-sm {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.4;
  color: var(--lm-text);
}

.lm-caption {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--lm-text-2);
}

.lm-footnote {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--lm-text-3);
}

.lm-numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.lm-link {
  color: var(--lm-primary);
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.lm-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. 레이아웃 유틸
   -------------------------------------------------------------------------- */
.lm-container {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  /* 360px 폭에서도 좌우 16px 고정 (DESIGN_SPEC §5) */
  padding: 22px 16px calc(32px + env(safe-area-inset-bottom));
}

.lm-stack {
  display: flex;
  flex-direction: column;
  gap: var(--lm-stack-gap, var(--lm-gap));
  min-width: 0;
}

.lm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lm-row-gap, var(--lm-gap-sm));
  min-width: 0;
}

.lm-row > * {
  min-width: 0;
}

.lm-row--between {
  justify-content: space-between;
}

.lm-row--end {
  justify-content: flex-end;
}

.lm-row--tight {
  --lm-row-gap: var(--lm-gap-xs);
}

.lm-divider {
  height: 1px;
  width: 100%;
  border: 0;
  margin: 0;
  background: var(--lm-separator);
}

/* 최소 360px 에서도 가로 스크롤이 생기지 않도록 min() 으로 트랙을 잘라둔다. */
.lm-grid {
  display: grid;
  gap: var(--lm-grid-gap, var(--lm-gap-sm));
  grid-template-columns: repeat(auto-fill, minmax(min(var(--lm-grid-min, 120px), 100%), 1fr));
}

.lm-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lm-scroll-lock {
  overflow: hidden !important;
  touch-action: none;
}

/* 부팅 화면 (관리자 셸 등) */
.lm-boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--lm-gap);
  min-height: 60svh;
  color: var(--lm-text-2);
}

/* --------------------------------------------------------------------------
   5. 인화지 프레임 — 인생네컷 모티프 (DESIGN_SPEC §3)
   사진을 보여주는 모든 곳은 이 구조를 쓴다:
   <figure class="lm-print">
     <div class="lm-print__window"><img alt="..."></div>
     <figcaption class="lm-print__caption">…</figcaption>
   </figure>
   -------------------------------------------------------------------------- */
.lm-print {
  display: block;
  margin: 0;
  background: #fff;
  padding: 8px 8px 0;              /* 위·좌우 여백 */
  border-radius: var(--lm-r-sm);
  box-shadow: var(--lm-shadow-print);
  border: 1px solid rgba(22, 22, 26, .06);
  transition: transform var(--lm-dur) var(--lm-ease), box-shadow var(--lm-dur) var(--lm-ease);
}

.lm-print__window {
  position: relative;
  display: block;
  border-radius: 6px;              /* 인화지 안쪽은 각이 거의 없다 */
  overflow: hidden;
  background: var(--lm-surface-sunken);
}

.lm-print__window > img,
.lm-print__window > canvas,
.lm-print__window > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lm-print__caption {
  display: block;
  padding: 7px 2px 9px;            /* 아래 띠가 위 여백(8px)보다 두껍다 = 인생네컷 느낌 */
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lm-text-3);
  text-align: center;
  letter-spacing: .01em;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 캡션이 없을 때는 아래 여백만 준다. */
.lm-print--nocaption {
  padding-bottom: 8px;
}

/* 인화지를 집어 드는 느낌의 아주 약한 기울기 */
@media (hover: hover) {
  a.lm-print:hover,
  button.lm-print:hover,
  .lm-print--tap:hover {
    transform: rotate(-.6deg) translateY(-2px);
    box-shadow: var(--lm-shadow-lg), var(--lm-shadow-print);
  }
}

@media (hover: none) {
  a.lm-print:hover,
  button.lm-print:hover,
  .lm-print--tap:hover {
    transform: none;
  }
}

/* 누를 수 있는 인화지 타일 */
a.lm-print,
button.lm-print,
.lm-print--tap {
  cursor: pointer;
  text-align: inherit;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

button.lm-print {
  font: inherit;
  color: inherit;
}

a.lm-print:active,
button.lm-print:active,
.lm-print--tap:active {
  transform: scale(.985);
}

/* 5.2 네컷 스트립 — 흰 인화지에 사진을 세로로 이어 붙인 필름 스트립 */
.lm-strip {
  display: flex;
  flex-direction: column;
  gap: 4px;                        /* 사진 사이 흰 간격 */
  padding: 6px 6px 10px;           /* 맨 아래는 로고 자리라 조금 더 두껍다 */
  background: #fff;
  border-radius: var(--lm-r-sm);
  border: 1px solid rgba(22, 22, 26, .06);
  box-shadow: var(--lm-shadow-print);
}

.lm-strip > * {
  border-radius: 4px;
  overflow: hidden;
  background: var(--lm-surface-sunken);
  flex: none;
}

.lm-strip > img {
  display: block;
  width: 100%;
  object-fit: cover;
}

/* 가로로 늘어놓는 변형 (QR 페이지 하단 썸네일) */
.lm-strip--row {
  flex-direction: row;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.lm-strip--row > * {
  scroll-snap-align: start;
}

.lm-strip__logo {
  align-self: center;
  padding-top: 2px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--lm-text-3);
  background: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   6. 카드 (DESIGN_SPEC §4.1)
   -------------------------------------------------------------------------- */
.lm-card {
  position: relative;
  padding: var(--lm-card-pad, var(--lm-pad));
  border-radius: var(--lm-card-radius, var(--lm-r));
  border: 1px solid var(--lm-border);
  background: var(--lm-surface);
  box-shadow: var(--lm-shadow-sm);
}

.lm-card--tight {
  --lm-card-pad: 14px;
  --lm-card-radius: var(--lm-r-sm);
}

.lm-card--flush {
  --lm-card-pad: 0px;
  overflow: hidden;
}

.lm-card__title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--lm-text);
}

.lm-card__desc {
  color: var(--lm-text-2);
  font-size: 13.5px;
}

/* 카드 안에서 다시 카드를 쓰지 않는다. 중첩이 필요하면 보조 표면을 쓴다. */
.lm-card .lm-card {
  border: 0;
  background: var(--lm-surface-2);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   7. 버튼 (DESIGN_SPEC §4.2)
   -------------------------------------------------------------------------- */
.lm-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  min-width: 50px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--lm-r-pill);
  background: var(--lm-surface-sunken);
  color: var(--lm-text);
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.012em;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition:
    transform var(--lm-dur-fast) var(--lm-ease),
    background-color var(--lm-dur) var(--lm-ease),
    border-color var(--lm-dur) var(--lm-ease),
    box-shadow var(--lm-dur) var(--lm-ease),
    color var(--lm-dur) var(--lm-ease);
}

.lm-btn:hover:not(:disabled):not(.is-loading) {
  background: var(--lm-bg-2);
}

.lm-btn:active:not(:disabled) {
  transform: scale(.96);
}

.lm-btn:disabled,
.lm-btn[aria-disabled="true"] {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.lm-btn--block {
  display: flex;
  width: 100%;
}

.lm-btn--lg {
  min-height: 56px;
  font-size: 17.5px;
  padding: 15px 24px;
}

/* 작게 쓰더라도 터치 영역 44px 는 유지한다. */
.lm-btn--sm {
  min-height: 44px;
  min-width: 44px;
  padding: 9px 15px;
  font-size: 14px;
}

/* primary: 틴트 단색. 그라디언트 금지. */
.lm-btn--primary {
  background: var(--lm-primary);
  color: var(--lm-text-inv);
  box-shadow: var(--lm-shadow-sm);
}

.lm-btn--primary:hover:not(:disabled):not(.is-loading) {
  background: var(--lm-primary-press);
}

.lm-btn--primary:active:not(:disabled) {
  background: var(--lm-primary-press);
}

.lm-btn--ghost {
  background: var(--lm-surface);
  border-color: var(--lm-border);
  color: var(--lm-text);
}

.lm-btn--ghost:hover:not(:disabled):not(.is-loading) {
  background: var(--lm-surface-2);
  border-color: var(--lm-border-strong);
}

/* iOS 의 tinted 버튼 */
.lm-btn--tinted {
  background: var(--lm-primary-weak);
  color: var(--lm-primary);
  border-color: transparent;
}

.lm-btn--tinted:hover:not(:disabled):not(.is-loading) {
  background: color-mix(in srgb, var(--lm-primary) 18%, transparent);
}

.lm-btn--danger {
  background: var(--lm-danger-weak);
  border-color: color-mix(in srgb, var(--lm-danger) 28%, transparent);
  color: var(--lm-danger);
}

.lm-btn--danger:hover:not(:disabled):not(.is-loading) {
  background: color-mix(in srgb, var(--lm-danger) 20%, transparent);
  border-color: var(--lm-danger);
}

/* 로딩 상태: 글자는 흐리게, 가운데 스피너 */
.lm-btn.is-loading {
  pointer-events: none;
  color: transparent;
}

.lm-btn.is-loading > * {
  opacity: .25;
}

.lm-btn.is-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 2.5px solid rgba(22, 22, 26, .16);
  border-top-color: var(--lm-text-2);
  animation: lm-spin .8s linear infinite;
}

.lm-btn--primary.is-loading::before {
  border-color: rgba(255, 255, 255, .34);
  border-top-color: #fff;
}

.lm-btn__icon {
  flex: none;
  font-size: 1.05em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   8. 칩 / 뱃지 / 세그먼티드 (DESIGN_SPEC §4.5, §4.7)
   -------------------------------------------------------------------------- */
.lm-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-r-pill);
  background: var(--lm-surface);
  color: var(--lm-text-2);
  font-size: 13.5px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--lm-dur-fast) var(--lm-ease),
    color var(--lm-dur-fast) var(--lm-ease),
    border-color var(--lm-dur-fast) var(--lm-ease),
    transform var(--lm-dur-fast) var(--lm-ease);
}

.lm-chip:active {
  transform: scale(.96);
}

.lm-chip:hover {
  color: var(--lm-text);
  border-color: var(--lm-border-strong);
}

.lm-chip.is-active,
.lm-chip[aria-pressed="true"] {
  border-color: transparent;
  background: var(--lm-primary-weak);
  color: var(--lm-primary);
}

.lm-chip--static {
  cursor: default;
}

.lm-chip--static:active {
  transform: none;
}

/* iOS 세그먼티드 컨트롤: 가라앉은 트랙 + 선택 항목만 흰 알약 */
.lm-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: var(--lm-r-pill);
  background: var(--lm-surface-sunken);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.lm-segmented::-webkit-scrollbar {
  display: none;
}

.lm-segmented > button,
.lm-segmented > a,
.lm-segmented > .lm-chip {
  flex: 1 1 auto;
  min-height: 34px;
  min-width: 0;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--lm-r-pill);
  background: transparent;
  color: var(--lm-text-2);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--lm-dur-fast) var(--lm-ease), color var(--lm-dur-fast) var(--lm-ease);
}

.lm-segmented > .is-active,
.lm-segmented > [aria-selected="true"],
.lm-segmented > [aria-pressed="true"] {
  background: var(--lm-surface);
  color: var(--lm-text);
  box-shadow: var(--lm-shadow-sm);
}

.lm-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--lm-r-pill);
  border: 0;
  background: var(--lm-surface-sunken);
  color: var(--lm-text-2);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.55;
  white-space: nowrap;
}

.lm-badge--ok {
  color: var(--lm-ok);
  background: var(--lm-ok-weak);
}

.lm-badge--warn {
  color: color-mix(in srgb, var(--lm-warn) 80%, #7a5300);
  background: var(--lm-warn-weak);
}

.lm-badge--danger {
  color: var(--lm-danger);
  background: var(--lm-danger-weak);
}

.lm-badge--muted {
  color: var(--lm-text-3);
  background: var(--lm-surface-sunken);
}

/* --------------------------------------------------------------------------
   9. 입력 (DESIGN_SPEC §4.3)
   -------------------------------------------------------------------------- */
.lm-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.lm-label,
.lm-field__label {
  display: block;
  color: var(--lm-text-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.lm-label__hint,
.lm-field__hint {
  color: var(--lm-text-3);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.55;
}

.lm-input,
.lm-select,
.lm-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--lm-r-sm);
  background: var(--lm-surface-sunken);
  color: var(--lm-text);
  /* 16px 미만이면 iOS 가 화면을 확대한다 — 반드시 16px 이상 */
  font-size: 16px;
  line-height: 1.5;
  transition:
    border-color var(--lm-dur-fast) var(--lm-ease),
    background-color var(--lm-dur-fast) var(--lm-ease),
    box-shadow var(--lm-dur-fast) var(--lm-ease);
  -webkit-appearance: none;
  appearance: none;
}

.lm-input::placeholder,
.lm-textarea::placeholder {
  color: var(--lm-text-3);
}

.lm-input:hover,
.lm-select:hover,
.lm-textarea:hover {
  background: var(--lm-bg-2);
}

.lm-input:focus,
.lm-select:focus,
.lm-textarea:focus {
  border-color: var(--lm-primary);
  background: #fff;
  box-shadow: 0 0 0 3.5px var(--lm-primary-weak);
  outline: none;
}

.lm-input:disabled,
.lm-select:disabled,
.lm-textarea:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.lm-input[aria-invalid="true"],
.lm-textarea[aria-invalid="true"] {
  border-color: var(--lm-danger);
  background: var(--lm-danger-weak);
}

.lm-textarea {
  min-height: 108px;
  resize: vertical;
  line-height: 1.6;
}

/* 외부 이미지 없이 CSS 만으로 그린 셀렉트 화살표 */
.lm-select {
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--lm-text-2) 50%),
    linear-gradient(135deg, var(--lm-text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.lm-select option {
  background: var(--lm-surface);
  color: var(--lm-text);
}

.lm-input[type="date"]::-webkit-calendar-picker-indicator,
.lm-input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: .5;
  cursor: pointer;
}

/* 체크박스 크기 확보(터치 영역) */
.lm-check {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--lm-primary);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   10. 그룹 목록 — iOS inset grouped (DESIGN_SPEC §4.4)
   -------------------------------------------------------------------------- */
.lm-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--lm-r);
  border: 1px solid var(--lm-border);
  background: var(--lm-surface);
  box-shadow: var(--lm-shadow-sm);
  overflow: hidden;
}

.lm-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lm-gap);
  min-height: 48px;
  padding: 12px 16px;
  color: var(--lm-text);
  font-size: 15px;
  background: transparent;
  border: 0;
  text-align: left;
  position: relative;
}

/* 행 사이 구분선 — 좌측 16px 들여쓰기, 마지막 행은 없음 */
.lm-list__row + .lm-list__row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: 1px;
  background: var(--lm-separator);
}

/* 라벨(왼쪽)은 보조색, 값(오른쪽)은 본문색 */
.lm-list__row > :first-child {
  color: var(--lm-text-2);
  font-size: 14px;
  font-weight: 600;
  flex: none;
}

.lm-list__row > :last-child {
  text-align: right;
  min-width: 0;
  font-weight: 600;
}

.lm-list__row > :only-child {
  color: var(--lm-text);
  flex: 1 1 auto;
  text-align: left;
}

a.lm-list__row,
button.lm-list__row {
  width: 100%;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--lm-dur-fast) var(--lm-ease);
}

a.lm-list__row:hover,
button.lm-list__row:hover {
  background: var(--lm-surface-2);
}

a.lm-list__row:active,
button.lm-list__row:active {
  background: var(--lm-bg-2);
}

/* --------------------------------------------------------------------------
   11. 상단바 — iOS 머티리얼 (DESIGN_SPEC §4.6)
   -------------------------------------------------------------------------- */
.lm-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--lm-gap-sm);
  min-height: 52px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  border-bottom: 1px solid var(--lm-separator);
  background: var(--lm-material);
  -webkit-backdrop-filter: var(--lm-material-blur);
  backdrop-filter: var(--lm-material-blur);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lm-topbar {
    background: #fff;
  }
}

/* --------------------------------------------------------------------------
   12. 스켈레톤 / 스피너 / 진행 표시 (DESIGN_SPEC §4.9)
   -------------------------------------------------------------------------- */
.lm-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--lm-r-sm);
  background: var(--lm-surface-sunken);
}

.lm-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  /* 밝은 흰색 shimmer — 어두운 shimmer 금지 */
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, .85) 55%, transparent);
  animation: lm-shimmer 1.45s linear infinite;
}

@keyframes lm-shimmer {
  to {
    transform: translateX(100%);
  }
}

.lm-spinner {
  display: inline-block;
  width: var(--lm-spinner-size, 24px);
  height: var(--lm-spinner-size, 24px);
  border-radius: 50%;
  border: var(--lm-spinner-width, 3px) solid rgba(22, 22, 26, .12);
  border-top-color: var(--lm-primary);
  animation: lm-spin .85s linear infinite;
}

.lm-spinner--lg {
  --lm-spinner-size: 42px;
  --lm-spinner-width: 4px;
}

@keyframes lm-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 진행률 바 (다운로드 진행률 등) — JS 가 --lm-value 를 0~100 으로 설정 */
.lm-progress {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: var(--lm-r-pill);
  background: var(--lm-surface-sunken);
  overflow: hidden;
}

.lm-progress__bar {
  display: block;
  height: 100%;
  width: calc(var(--lm-value, 0) * 1%);
  border-radius: inherit;
  background: var(--lm-primary);
  transition: width .25s var(--lm-ease);
}

.lm-progress.is-indeterminate .lm-progress__bar {
  width: 42%;
  animation: lm-indeterminate 1.25s var(--lm-ease) infinite;
}

@keyframes lm-indeterminate {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(260%);
  }
}

/* 인화지 게이지 — JS 가 --lm-value 를 0~100 으로 설정 */
.lm-gauge {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: var(--lm-r-pill);
  background: var(--lm-surface-sunken);
  overflow: hidden;
}

.lm-gauge__fill {
  display: block;
  height: 100%;
  width: calc(var(--lm-value, 0) * 1%);
  border-radius: inherit;
  background: var(--lm-primary);
  transition: width .6s var(--lm-ease), background-color .3s var(--lm-ease);
}

.lm-gauge--ok .lm-gauge__fill {
  background: var(--lm-ok);
}

.lm-gauge--warn .lm-gauge__fill {
  background: var(--lm-warn);
}

.lm-gauge--danger .lm-gauge__fill {
  background: var(--lm-danger);
}

/* --------------------------------------------------------------------------
   13. 토스트 (모바일: 하단 중앙 / 데스크톱: 우하단) — DESIGN_SPEC §4.8
   -------------------------------------------------------------------------- */
#lm-toast-root {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: var(--lm-z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  pointer-events: none;
}

@media (min-width: 641px) {
  #lm-toast-root {
    left: auto;
    right: 24px;
    bottom: 24px;
    align-items: flex-end;
    padding: 0;
    max-width: 380px;
  }
}

.lm-toast {
  pointer-events: auto;
  max-width: 100%;
  padding: 13px 18px;
  border-radius: var(--lm-r);
  border: 1px solid var(--lm-border);
  background: var(--lm-surface);
  color: var(--lm-text);
  font-size: 14.5px;
  font-weight: 650;
  box-shadow: var(--lm-shadow-lg);
  animation: lm-toast-in .3s var(--lm-ease-spring) both;
}

.lm-toast--ok {
  box-shadow: var(--lm-shadow-lg), inset 3px 0 0 var(--lm-ok);
}

.lm-toast--warn {
  box-shadow: var(--lm-shadow-lg), inset 3px 0 0 var(--lm-warn);
}

.lm-toast--danger {
  box-shadow: var(--lm-shadow-lg), inset 3px 0 0 var(--lm-danger);
}

.lm-toast.is-hiding {
  animation: lm-toast-out .24s var(--lm-ease) both;
}

@keyframes lm-toast-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes lm-toast-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(.97);
  }
}

/* --------------------------------------------------------------------------
   14. 모달 (모바일에서는 하단 시트) — DESIGN_SPEC §4.8
   -------------------------------------------------------------------------- */
.lm-modal {
  position: fixed;
  inset: 0;
  z-index: var(--lm-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(22, 22, 26, .28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: lm-fade-in .22s var(--lm-ease) both;
}

.lm-modal[hidden] {
  display: none;
}

.lm-modal__panel {
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  border-radius: var(--lm-r-lg);
  border: 1px solid var(--lm-border);
  background: var(--lm-surface);
  box-shadow: var(--lm-shadow-lg);
  animation: lm-pop-in .26s var(--lm-ease-spring) both;
}

.lm-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.lm-modal__title {
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -.015em;
}

@keyframes lm-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes lm-pop-in {
  from {
    opacity: 0;
    transform: scale(.94) translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .lm-modal {
    align-items: flex-end;
    padding: 0;
  }

  .lm-modal__panel {
    max-width: none;
    max-height: 88vh;
    max-height: 88svh;
    padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: var(--lm-r-xl) var(--lm-r-xl) 0 0;
    border-bottom: 0;
    animation: lm-sheet-up .3s var(--lm-ease) both;
  }

  /* 시트 손잡이(드래그 핸들) */
  .lm-modal__panel::before {
    content: "";
    display: block;
    width: 42px;
    height: 5px;
    margin: 0 auto 14px;
    border-radius: var(--lm-r-pill);
    background: rgba(22, 22, 26, .16);
  }
}

@keyframes lm-sheet-up {
  from {
    opacity: .4;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   15. 홍보 블록 (lm.js renderPromo)
   -------------------------------------------------------------------------- */
.lm-promo {
  --lm-card-pad: 20px;
  overflow: hidden;
}

.lm-promo__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lm-promo__tag {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--lm-r-pill);
  border: 0;
  background: var(--lm-primary-weak);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--lm-primary);
}

.lm-promo__title {
  font-size: 19px;
  font-weight: 750;
  letter-spacing: -.015em;
}

.lm-promo__body {
  color: var(--lm-text-2);
  font-size: 14.5px;
  white-space: pre-line;
}

.lm-promo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.lm-promo__actions .lm-btn {
  flex: 1 1 140px;
}

/* --------------------------------------------------------------------------
   16. 라이트박스 (lm.js lightbox) — 밝은 반투명 배경 + 인화지 프레임
   -------------------------------------------------------------------------- */
.lm-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--lm-z-lightbox);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(246, 244, 240, .92);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  animation: lm-fade-in .2s var(--lm-ease) both;
  touch-action: pan-y;
}

.lm-lightbox__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 8px;
}

.lm-lightbox__counter {
  padding: 6px 13px;
  border-radius: var(--lm-r-pill);
  background: var(--lm-surface);
  border: 1px solid var(--lm-border);
  color: var(--lm-text-2);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lm-lightbox__close {
  width: 44px;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
}

.lm-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 4px 12px;
  min-height: 0;
  overflow: hidden;
}

/* 사진은 언제나 흰 인화지 프레임 안에서 보인다. */
.lm-lightbox__stage .lm-print {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  animation: lm-pop-in .26s var(--lm-ease-spring) both;
}

.lm-lightbox__stage .lm-print__window {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  max-height: 100%;
  background: transparent;
}

/* .lm-print__window > img 의 cover 규칙보다 명시도를 높여 contain 을 지킨다. */
.lm-lightbox__img,
.lm-lightbox__stage .lm-print__window > .lm-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  transition: opacity var(--lm-dur) var(--lm-ease);
}

.lm-lightbox__img.is-loading {
  opacity: .35;
}

.lm-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  min-height: 46px;
  min-width: 46px;
  padding: 0;
  border-radius: 50%;
  background: var(--lm-material);
  -webkit-backdrop-filter: var(--lm-material-blur);
  backdrop-filter: var(--lm-material-blur);
  border: 1px solid var(--lm-border);
  color: var(--lm-text);
  box-shadow: var(--lm-shadow-sm);
  font-size: 19px;
  z-index: 2;
}

/* .lm-btn:active 의 scale 이 가운데 정렬(translateY)을 덮어쓰지 않도록 같은 명시도로 다시 지정한다. */
.lm-lightbox__nav:active:not(:disabled) {
  transform: translateY(-50%) scale(.94);
}

.lm-lightbox__nav--prev {
  left: 10px;
}

.lm-lightbox__nav--next {
  right: 10px;
}

.lm-lightbox__bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
}

.lm-lightbox__caption {
  color: var(--lm-text-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  min-height: 1.2em;
}

/* --------------------------------------------------------------------------
   17. 모션 최소화 선호 (DESIGN_SPEC §5)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .lm-btn:active:not(:disabled),
  .lm-chip:active {
    transform: none;
  }

  a.lm-print:hover,
  button.lm-print:hover,
  .lm-print--tap:hover {
    transform: none;
  }
}