/* =========================================================
   TK Canal — "Agencia"
   An agency has to look like it can make something. Near-black,
   one loud coral, Syne set enormous and tight. Rules are heavy,
   type runs to the edge, nothing is decorative for its own sake.
   ========================================================= */

:root {
  --main: #F3F0EB;
  --bg: #0A0A0C;
  --bg-dark: #000000;
  --bg-soft: #141418;

  --second: #FF5F6D;        /* coral — the only colour on the site */
  --third: #FF5F6D;
  --gold: #FF5F6D;

  --key-green: #FF5F6D;
  --key-navy: #F3F0EB;
  --key-red: #FF5F6D;

  --line: rgba(243, 240, 235, 0.18);
  --line-soft: rgba(243, 240, 235, 0.08);
  --dim: rgba(243, 240, 235, 0.64);
  --dimmer: rgba(243, 240, 235, 0.40);

  --accent-line: rgba(255, 95, 109, 0.5);
  --accent-soft: rgba(255, 95, 109, 0.12);
  --hdr-bg: rgba(10, 10, 12, 0.92);
  --hover-bg: rgba(243, 240, 235, 0.06);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  --ph: rgba(243, 240, 235, 0.26);
  --scrim: linear-gradient(180deg, rgba(10,10,12,.86) 0%, rgba(10,10,12,.72) 38%, rgba(10,10,12,.80) 62%, rgba(10,10,12,.98) 100%);
  --glow-top: radial-gradient(130% 95% at 50% 0%, rgba(255, 95, 109, 0.20) 0%, transparent 60%);
  --glow-tile: radial-gradient(90% 80% at 85% 0%, rgba(255, 95, 109, 0.16), transparent 60%);
  --glow-cta: radial-gradient(85% 140% at 50% 0%, rgba(255, 95, 109, 0.22), transparent 62%);

  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "Hiragino Sans", "Hiragino Sans GB", "Yu Gothic", "Microsoft YaHei", "PingFang SC", "PingFang TC",
    "Apple SD Gothic Neo", "Malgun Gothic", "Nirmala UI", "Noto Sans", sans-serif;
  --font-header: "Syne", "Jost", "Hiragino Sans GB", "PingFang SC", "Apple SD Gothic Neo", sans-serif;

  --radius: 0px;
  --h-weight: 700;
  --h-track: -1.6px;
}

/* Display type set as large and as tight as it will go */
h1, h2, h3, h4 {
  font-weight: var(--h-weight);
  letter-spacing: var(--h-track);
  line-height: 0.96;
  text-transform: none;
}
.hero--full h1 { font-size: clamp(3rem, 8.4vw, 7rem); }
.main-header { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
h1 em, .lede em { font-style: normal; color: var(--second); }

/* Kickers shout rather than whisper */
.kicker {
  color: var(--second);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.4em;
}

/* Heavy rules — an agency grid, not a hairline grid */
.rows { border-top: 2px solid var(--main); }
.rows .row { border-bottom: 1px solid var(--line); }
.row__t { font-size: 1.7rem; letter-spacing: -0.8px; }
.row__n { color: var(--second); font-weight: 500; }

.tile h3 { font-size: 2.1rem; }
.tile__n { color: var(--second); }

.stat b { font-weight: 700; letter-spacing: -2px; }

.cat h4 { font-size: 1.5rem; }
.cat__es { color: var(--second); }

/* A solid coral button is the one place the colour fills */
.btn--solid { background: var(--second); border-color: var(--second); color: #0A0A0C; }
.btn--solid::after { background: var(--main); }
.btn { font-weight: 500; }

.pull { border-block: 2px solid var(--main); }
.pull p { font-size: clamp(1.9rem, 4.4vw, 3.4rem); letter-spacing: -1.2px; }

.quote blockquote { letter-spacing: -1px; }

.ptable th { background: var(--second); color: #0A0A0C; letter-spacing: .18em; border-bottom: 0; }
.ptable td.num { color: var(--second); font-weight: 500; }

.imgcard { filter: saturate(1.05) contrast(1.06); }

/* The three-bar rule under the hero is a group device; here it is
   one coral bar, because this site has one colour. */
.tri i:nth-child(2) { background: var(--main); }

/* The hero photograph is a working studio, so it is busy behind the
   type. A second wash under the text block keeps the lede readable
   without flattening the picture at the edges. */
.hero--full .hero__in::before {
  content: "";
  position: absolute; inset: -40px -8vw;
  background: radial-gradient(70% 70% at 50% 50%, rgba(10,10,12,.72) 0%, transparent 72%);
  z-index: -1;
}
.hero--full .hero__in { isolation: isolate; }
.hero .lede { color: rgba(243, 240, 235, 0.88); }

/* 통계 라벨은 숫자를 설명하는 유일한 줄이라 읽혀야 한다 */
.stat span, .tile__sub { color: rgba(243, 240, 235, 0.58); }