/*
 * 관리자 ▸ 홈 대표 사진 — the live preview and its focal-point picker.
 *
 * Loaded by admin/index.html alone. Every selector below is scoped to a class the hero
 * panel owns, so nothing here can reach the other eleven pages.
 *
 * THE PREVIEW IS THE HOMEPAGE, IN MINIATURE. `js/admin/hero-panel.js` paints it with
 * `applyHeroPhotoLayer` — the same function, writing the same three custom properties,
 * that `css/home-renewal.css` reads on the live hero. So the rules for the image layer
 * here are deliberately a copy of `.home-hero[data-hero-photo="true"]::after`:
 *
 *   - `cover` around `--home-hero-photo-position`, which is the *only* crop, because
 *     Cloudinary delivers the photograph whole (`c_limit`, never `c_fill`);
 *   - `blur(--home-hero-photo-blur)` at the published strength; and
 *   - nothing else. No veil, no tint, no gradient — what is previewed is what is served.
 *
 * `--admin-hero-bleed` plays the part `--home-hero-photo-bleed` plays on the hero: a
 * Gaussian blur samples roughly three radii past its own box, so the image layer has to
 * overscan by at least three times the 12px ceiling or the preview frays at full blur.
 */

.admin-hero-preview {
  --admin-hero-bleed: 40px;   /* >= 3 × the 12px blur ceiling (HERO_BLUR.max) */

  margin: 12px 0 20px;
  max-width: 32rem;
}

.admin-hero-preview[hidden] { display: none; }

/* --------------------------------------------------------- 화면 비율 고르기 */

.admin-hero-modes {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 8px;
}

.admin-hero-modes button[aria-pressed="true"] {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
}

/* ------------------------------------------------------------ 미리보기 화면 */

/*
 * The frame is the hero's viewport: a fixed aspect ratio the photograph is cropped into,
 * at roughly the proportions each screen gives it. It clips the overscanned image layer,
 * and it is what a click is measured against — `contentBox` in js/admin/hero-focus.js
 * subtracts this border, so the corners of the photograph are the corners of the frame.
 */
.admin-hero-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background: var(--deep);      /* the deep green the hero falls back to */
  cursor: crosshair;
  touch-action: none;           /* a drag aims the photograph; it does not scroll the page */
}

.admin-hero-preview[data-hero-mode="mobile"] .admin-hero-frame {
  aspect-ratio: 4 / 5;
  max-width: 19rem;
}

.admin-hero-frame:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* The photograph itself — see the note at the top of this file before changing it. */
.admin-hero-frame::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--admin-hero-bleed));
  z-index: -1;
  pointer-events: none;
  background-image: var(--home-hero-photo);
  background-position: var(--home-hero-photo-position);
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(var(--home-hero-photo-blur));
}

/* ----------------------------------------------------------- 초점 표시 */

/*
 * The marker has to stay visible over a photograph of any brightness, so it is drawn
 * twice: a white ring and a black one, each the other's outline. It is centred on the
 * focal point and never intercepts the pointer, so a click always reaches the frame.
 */
.admin-hero-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.85), inset 0 0 0 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.admin-hero-marker::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.85);
}

.admin-hero-preview .status {
  margin: 8px 0 0;
  font-size: 0.9rem;
}

/* ------------------------------------------------------- 흐림 강도 슬라이더 */

.admin-hero input[type="range"] {
  width: min(100%, 24rem);
  min-height: 44px;            /* a comfortable target on a touch screen */
}

/*
 * On its own line rather than inline: the admin fields put label, control and hint in one
 * run of text, and a value wedged between the slider and the hint reads as the first
 * words of the hint instead of as the setting it is.
 */
.admin-hero-blur-value {
  display: block;
  margin: 4px 0 0;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}