/* ============================================================================
   연사(speakers.html) 전용 섹션
   시안 1920 값을 전사하고 사이 폭은 규칙(clamp)으로 유동 처리한다.
   ========================================================================== */
@layer components {
  /* ── SPEAKERS ─────────────────────────────────────────────────────────── */
  .keynote{background:var(--c-panel);border-radius:var(--r-lg);padding:24px;
    display:flex;flex-direction:column;gap:clamp(14px,1.042vw,20px);}
  .keynote__ph{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:475/320;background:var(--c-panel-2);}
  .keynote__ph>img{width:100%;height:100%;object-fit:cover;}
  .keynote__nm{font-family:var(--ff-kr);font-weight:700;font-size:var(--fs-d4);line-height:1.3;}
  .keynote__ro{font-size:var(--fs-xs);color:var(--c-accent);}
  .keynote__ds{font-size:var(--fs-sm);color:var(--c-body);line-height:1.65;}
  .sp-row{display:grid;grid-template-columns:clamp(50px,5.208vw,100px) minmax(0,1fr);
    gap:clamp(10px,1.25vw,24px);padding-block:clamp(18px,1.563vw,30px);
    border-top:1px solid var(--c-line);align-items:center;}
  .sp-row:last-child{border-bottom:1px solid var(--c-line);}
  .sp-row__no{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-sm);color:var(--c-mute);}
  .sp-row__body{display:grid;gap:4px clamp(12px,1.667vw,32px);}
  @media (min-width:901px){.sp-row__body{grid-template-columns:minmax(0,22vw) minmax(0,1fr) minmax(0,14vw);align-items:center;}}
  .sp-row__nm{font-family:var(--ff-kr);font-weight:700;font-size:var(--fs-sm);}
  .sp-row__tp{font-size:var(--fs-xs);color:var(--c-body);}
  .sp-row__og{font-size:var(--fs-xs);color:var(--c-mute);}

  /* ── 기조연사 카드 (시안 189:604/611/618) ─────────────────────────────── */
  .knote{--knote-grad:0;position:relative;overflow:hidden;isolation:isolate;
    border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;
    gap:clamp(16px,1.458vw,28px);background:var(--c-panel);}
  .knote::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:var(--grad-brand);opacity:var(--knote-grad);}
  .knote__ph,.knote__meta{position:relative;z-index:1;}
  .knote__ph{position:relative;aspect-ratio:475/320;border-radius:18px;overflow:hidden;
    background:var(--c-panel-2);display:flex;align-items:flex-end;justify-content:space-between;
    padding:16px;}
  .knote__slide{position:absolute;inset:0;z-index:0;}
  .knote__slide .swiper-slide img{width:100%;height:100%;object-fit:cover;display:block;}
  .knote__ph::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.2);
    pointer-events:none;}
  /* line-height:1 이면 글리프 하단이 상자 밖으로 2px 나가 조상 클립에 잘린다(실측) */
  .knote__ini{font-family:var(--ff-brand);font-weight:700;line-height:1.1;opacity:.5;
    font-size:clamp(40px,4.167vw,80px);color:#c9b8ff;padding-top:3px;position:relative;z-index:2;}
  .knote--cy .knote__ini{color:var(--c-cyan);}
  .knote__dots{position:relative;z-index:2;bottom:auto;left:auto;width:auto;
    display:flex;gap:6px;align-items:center;margin:0;}
  .knote__dots .swiper-pagination-bullet{width:10px;height:10px;margin:0;border-radius:20px;
    background:#fff;opacity:.5;}
  .knote__dots .swiper-pagination-bullet-active{opacity:1;background:#fff;}
  .knote__meta{display:flex;flex-direction:column;gap:8px;}
  .knote__dt{font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-sm);color:var(--c-accent);}
  .knote__nm{font-family:var(--ff-brand);font-weight:700;font-size:var(--fs-d4);line-height:1.42;
    padding-top:3px;}
  .knote__og{font-size:var(--fs-sm);color:var(--c-body);}
  .knote__tp{font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-sm);color:var(--c-cyan);line-height:1.6;}
  .knote .knote__dt.is-hot,.knote .knote__nm.is-hot,.knote .knote__tp.is-hot{color:#121212;}
  .knote .knote__og.is-hot{color:#24202c;}
  @media (prefers-reduced-motion:reduce){
    .knote:hover,.knote:focus-visible,.knote.is-hot{--knote-grad:1;}
  }

  /* ── 연사 디렉토리 카드 (시안 189:630… · 388x300 4칸) ─────────────────── */
  .spcard{background:var(--c-panel);border-radius:20px;
    padding:clamp(22px,1.563vw,30px) clamp(20px,1.458vw,28px);
    display:flex;flex-direction:column;gap:clamp(10px,.833vw,16px);min-height:clamp(200px,15.625vw,300px);}
  /* 4열 체크무늬 — 옆·아래 칸과 색이 갈린다 (2,4,5,7…) */
  .spcard:nth-child(8n+2),
  .spcard:nth-child(8n+4),
  .spcard:nth-child(8n+5),
  .spcard:nth-child(8n+7){background:#171717;}
  .spcard__no{font-family:var(--ff-display);font-weight:700;font-size:var(--fs-sm);color:var(--c-accent);}
  .spcard__nm{font-family:var(--ff-brand);font-weight:700;font-size:var(--fs-lead);line-height:1.35;
    padding-top:3px;}
  .spcard__og{font-size:var(--fs-sm);color:var(--c-body);line-height:1.66;}
  .spcard__tp{font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-xxs);color:var(--c-cyan);
    letter-spacing:.06em;margin-block-start:auto;}

  /* ── 상태 안내 ─────────────────────────────────────────────────────────── */
  /* 시안 Speaker_Status: STATUS 라벨 뒤 본문이 x=+544 에서 시작해 1100 폭이다 */
  /* 시안 Speaker_Status 라운드 24 */
  .statusbox{background:var(--c-panel);border-radius:24px;
    padding:clamp(22px,1.875vw,36px);display:grid;grid-template-columns:544fr 1056fr;column-gap:0;}
  .statusbox__t{font-family:var(--ff-ui);font-weight:500;font-size:var(--fs-xs);
    color:var(--c-accent);letter-spacing:.06em;}
  .statusbox__b{min-width:0;max-width:1100px;font-size:var(--fs-sm);color:var(--c-body);line-height:1.9;}
  @media (max-width:900px){
    .statusbox{grid-template-columns:minmax(0,1fr);row-gap:var(--gap-sm);}
    .knote__ini{font-size:40px;}
    /* 2열 체크무늬 (2,3,6,7…) */
    .spcard:nth-child(n){background:var(--c-panel);}
    .spcard:nth-child(4n+2),
    .spcard:nth-child(4n+3){background:#171717;}
  }
  @media (max-width:600px){
    .knote__ini{font-size:32px;}
    /* 1열 — 짝수 칸만 */
    .spcard:nth-child(n){background:var(--c-panel);}
    .spcard:nth-child(even){background:#171717;}
  }
}

/* Swiper 언레이어드 시트가 @layer components 보다 우선하므로 슬라이드 레이아웃만 밖으로 뺀다 */
.knote__ph{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}
.knote__ph .swiper.knote__slide{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  margin:0;
}
.knote__ph .swiper.knote__slide .swiper-wrapper,
.knote__ph .swiper.knote__slide .swiper-slide{height:100%;}
.knote__ph .swiper.knote__slide .swiper-slide img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.knote__ini{position:relative;z-index:2;}
/* Swiper 언레이어드 .swiper-pagination-horizontal 이 left:0;width:100% 로
   도트를 사진 하단 가운데에 깐다. 이 선택자가 그걸 이기고 우측 하단에 둔다. */
.knote__ph .knote__dots.swiper-pagination,
.knote__ph .knote__dots.swiper-pagination-horizontal.swiper-pagination-bullets{
  position:relative;inset:auto;left:auto;right:auto;bottom:auto;top:auto;
  width:auto;transform:none;text-align:left;z-index:2;margin:0;
  display:flex;gap:6px;align-items:center;
}
.knote__dots.swiper-pagination-lock{display:flex;}
.knote__dots .swiper-pagination-bullet{
  width:10px;height:10px;margin:0;border-radius:20px;
  background:#fff;opacity:.5;
}
.knote__dots .swiper-pagination-bullet-active{opacity:1;background:#fff;}