/* ============================================================
   바탕 — 초기화와 공통 요소
   값은 전부 tokens.css 에서 가져온다. 여기에 숫자를 직접 쓰지 않는다
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;  /* 휴대폰을 가로로 돌려도 글자가 커지지 않게 */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

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

/* hidden 이 붙었는데도 보이는 일을 막는다.
   브라우저가 기본으로 주는 [hidden] { display: none } 은 약해서
   우리가 display: flex 같은 것을 주면 그대로 덮여 버린다.
   숨기라고 했으면 숨어야 한다 */
[hidden] { display: none !important; }


/* ── 작품 사진 보호 ──────────────────────────────────────────
   워터마크는 넣지 않는다. 대신 손이 미끄러져 저장되는 것만 막는다.
   마음먹고 가져가는 사람은 못 막는다는 것을 알고 넣는 코드다 (PRD 4.6)
   오른쪽 클릭 차단은 assets/js/protect.js 에서 한다 */

.artwork-img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;  /* iOS 길게 눌러 저장 막기 */
  pointer-events: auto;
}


/* ── 틀 ──────────────────────────────────────────────────────*/

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--text { max-width: var(--wrap-text); }

.section { padding-block: var(--sp-16); }

@media (max-width: 640px) {
  .section { padding-block: var(--sp-10); }
}


/* ── 글 ──────────────────────────────────────────────────────*/

.t-display {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 600;
}

.t-title {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 600;
}

.t-sub {
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  font-weight: 600;
}

.t-body  { font-size: var(--fs-base); }
.t-small { font-size: var(--fs-sm); color: var(--c-ink-2); }

/* 작품 캡션 — 작품명 · 연도 · 재료 · 크기 */
.t-caption {
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
  line-height: var(--lh-normal);
}

/* 눈에 안 띄는 작은 레이블 */
.t-label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-3);
  font-weight: 600;
}

/* 작가노트처럼 오래 읽는 글 */
.prose {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--c-ink);
}
.prose p + p { margin-top: var(--sp-6); }


/* ── 링크 ────────────────────────────────────────────────────*/

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

a:hover { color: var(--c-accent); }

/* 글 속의 링크는 밑줄이 있어야 링크인 줄 안다 */
.prose a,
.link {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}


/* ── 키보드 초점 ─────────────────────────────────────────────
   마우스로 눌렀을 때는 안 나오고 키보드로 옮겨 다닐 때만 나온다 */

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}


/* ── 버튼 ────────────────────────────────────────────────────
   관리자 화면에서도 그대로 쓴다.
   높이가 --tap 밑으로 내려가지 않는다 (PRD 5.1) */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--c-ink);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.btn:hover  { background: #000; color: #fff; }
.btn:active { transform: translateY(1px); }

.btn--primary        { background: var(--c-accent); }
.btn--primary:hover  { background: var(--c-accent-dark); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-line-strong);
}
.btn--ghost:hover { background: var(--c-surface-2); color: var(--c-ink); }

.btn--danger       { background: var(--c-danger); }
.btn--danger:hover { background: #8e3030; color: #fff; }

/* 작가가 누를 가장 중요한 버튼. 「작품 올리기」 */
.btn--big {
  min-height: 56px;
  padding-inline: var(--sp-8);
  font-size: var(--fs-md);
  width: 100%;
}

.btn[disabled] { opacity: .45; cursor: not-allowed; }

@media (min-width: 641px) {
  .btn--big { width: auto; min-width: 240px; }
}


/* ── 알림 ────────────────────────────────────────────────────
   저장이 끝나면 조용히 넘어가지 않는다 (PRD 5.1) */

.flash {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: 600;
  margin-bottom: var(--sp-6);
}

.flash--ok    { background: var(--c-ok-soft);     color: var(--c-ok); }
.flash--error { background: var(--c-danger-soft); color: var(--c-danger); }


/* ── 화면에는 안 보이고 읽어주는 기계에만 ────────────────────*/

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}