/* M1 — changes taken from the Manus review of the live V43 (2026-11-04), applied on top of C1.
   Only the parts that fit this site: readable sentence sizes, a clear button hierarchy, Korean labels (in JS).
   Not taken: invented mail address / testimonials, serif font switch, global type overrides. */

/* ---------- 1. readable text ---------- */
/* desktop: short explanatory notes were 13px */
.wh-note, .mo-note, .aw-note, .mf-honest { font-size: 14.5px; line-height: 1.7; }
#approach p.mute { font-size: 14.5px !important; line-height: 1.7; } /* the template sets font-size:13px inline */
@media (max-width: 760px) { #approach p.mute { font-size: 15px !important; } }
@media (max-width: 760px) {
  /* sentences: 15px / 1.7 on phones (were 13–13.5px) */
  .h2-sub, .fr-desc, .wh-note, .mo-note, .aw-note, .tile-c .g, .mf-honest, #approach p.mute, .sv-row .dd, .dv-sm, .ax-spec dd { font-size: 15px; line-height: 1.7; }
  .mo-list small { font-size: 14px; line-height: 1.6; }
  /* captions and meta: 13px (were 11.5–12.5px) */
  .tile-c .tg, .mr-cap, .bw-ctl span, .dv-strip figcaption, .dv-apps figcaption { font-size: 13px; line-height: 1.55; }
  /* Korean labels set in the small caps style read badly under 12px */
  .fr-kind span, .mf-top .kick, .bw-top .lb, .dv-t > .lb, .dv-next .lb { font-size: 12px; letter-spacing: .06em; }
}

/* ---------- Featured hover (OWNER 2026-11-04: "마우스를 올릴 때 까만 선이 보여서 보기 싫다") ----------
   No spinning border, no pure-black shadow, no dark seam on the tilted video edge. The gentle tilt and the coloured glow stay. */
.fr-boxw::before, .fr-c:hover .fr-boxw::before, .fr-c:focus-within .fr-boxw::before { display: none; animation: none; }
.fr-film { box-shadow: 0 34px 70px -40px color-mix(in srgb, var(--c) 70%, #4a3a40), 0 0 100px -30px color-mix(in srgb, var(--c) 42%, transparent); background: transparent; backface-visibility: hidden; outline: 1px solid transparent; }
/* the tilted (3D) video let its black background show along the edges as broken lines: clip the box 1px inside
   and enlarge the media a little so no video edge ever reaches the box edge */
.fr-film { clip-path: inset(1px); }
/* OWNER: "마우스 올렸을 때 박스가 살짝 움직이면서 점점으로 보인다" → then "살짝 기우는 효과는 살릴 수 없나".
   The dots were the video's black backing showing through the anti-aliased edge of the 3D-tilted box.
   Keep a gentler tilt, but: (1) everything behind the video is the light work tint, never black,
   (2) the media is enlarged and the box clipped 1px inside, so no video edge reaches the box edge,
   (3) the box is its own smooth 3D layer (transparent outline + will-change) so Chrome anti-aliases it cleanly. */
.fr-film { background: var(--c); will-change: transform; outline: 1px solid transparent; -webkit-backface-visibility: hidden;
  transform: perspective(1000px) rotateY(calc(var(--px) * 3.5deg)) rotateX(calc(var(--py) * -2.8deg)) translateZ(0) !important; }
.fr-film .plate-host { background: var(--c); }
.fr-film video { background: var(--c); }
.fr-c:hover .fr-film, .fr-film:focus-visible { translate: 0 -4px; }
.fr-film { transition: transform .5s var(--ease), translate .45s var(--ease), box-shadow .45s var(--ease); }
@media (prefers-reduced-motion: reduce) { .fr-film { transform: none !important; } .fr-c:hover .fr-film { translate: none; } }
.fr-film .plate-host, .fr-film video, .fr-film img { backface-visibility: hidden; background: transparent; }
.fr-film video, .fr-film img { transform: scale(1.03); }
.fr-film:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; }

/* ---------- 2. button hierarchy ---------- */
/* nav: items stay quiet; "문의" is the only outlined item */
.nav a[data-id="contact"] { padding: 7px 14px; border: 1px solid currentColor; transition: background .25s ease, color .25s ease; }
.nav a[data-id="contact"]::after { display: none; }
.nav a[data-id="contact"]:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hd.dark .nav a[data-id="contact"]:hover { background: var(--hero-ink); border-color: var(--hero-ink); color: #05070a; }
.nav a[aria-current="true"] { font-weight: 700; }
@media (max-width: 760px) {
  /* phone menu: 문의 becomes a solid button under the list */
  .nav a[data-id="contact"] { margin-top: 18px; padding: 0 18px; min-height: 52px; display: flex; align-items: center; justify-content: center; border: 0; background: var(--ink); color: var(--paper); font-size: 16px; }
  .hd.dark .nav a[data-id="contact"] { background: var(--hero-ink); color: #05070a; }
}

/* primary: the hero CTA is a filled amber button (the one action we want first) */
.hero2 .h2-cue { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 20px; background: var(--amber); color: #14110c; font-weight: 600; letter-spacing: .06em; transition: background .3s ease, transform .3s ease; }
.hero2 .h2-cue:hover { background: #F0D1A7; transform: translateY(-2px); }
.hero2 .h2-cue span { transition: transform .3s ease; }
.hero2 .h2-cue:hover span { transform: translateY(3px); }
@media (max-width: 760px) { .hero2 .h2-cue { min-height: 50px; } }

/* secondary: text links with a line and an arrow that moves */
.fr-all { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid currentColor; color: var(--ink); }
.fr-all:hover { color: var(--red); }