@charset "UTF-8";
/* ==========================================================================
   ICNX 2026 — scoped stylesheet
   Hand-authored. No build step, no Tailwind, no framework.
   Every selector lives under .icnx26 so nothing can leak into the preserved
   2025 pages if the two are ever served from the same document.
   Palette sampled directly from the supplied landscape key visual.
   ========================================================================== */

.icnx26 {
  /* --- surface ---------------------------------------------------------- */
  --navy-950: #03041f;
  --navy-900: #050635;
  --navy-850: #080742;
  --navy-800: #101243;
  --navy-700: #1b1d55;
  --panel:    rgba(37, 37, 81, .55);
  --panel-2:  rgba(20, 21, 62, .72);
  --line:     rgba(163, 144, 170, .22);
  --line-2:   rgba(163, 144, 170, .40);

  /* --- accent ----------------------------------------------------------- */
  --magenta:  #e07ccb;
  --magenta-b:#ff8fdc;
  --violet:   #8b6bd6;
  --lavender: #b9a7e6;
  --amber:    #ffbe86;

  /* --- text ------------------------------------------------------------- */
  --ink:      #f2eefb;
  --ink-2:    #cdc6e4;
  --ink-3:    #9d95bd;

  --shell:    1200px;
  --radius:   14px;
  --radius-l: 20px;
  --header-h: 66px;

  --ease: cubic-bezier(.22, .61, .36, 1);

  color: var(--ink);
  background: var(--navy-950);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  /* 루트 스케일을 그대로 물려받는다 — 크기의 기준점은 html.icnx26-root 하나다. */
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;

  /* This document is lang="ko", and with word-break: normal a browser may put
     a line break between any two Hangul syllables — so a sentence can be cut
     in the middle of a word. On Production that is exactly what happened to
     the B2C 전시·체험 소개문: 있습니다. split after 있습니 and left "다." alone on a
     19px last line. keep-all breaks Korean at spaces only, the way it already
     breaks English, so an 어절 can no longer be halved.
     overflow-wrap is the safety valve that keep-all needs: a token wider than
     its own line box still breaks instead of overflowing. It cannot re-open
     the defect, because break-word only applies to a word that cannot fit on
     a line by itself, which no 어절 in this copy comes close to.
     .notice-detail-body overrides both — it prints 공지 본문 as the customer
     types it, which may carry an unbroken URL. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* --- reset (scoped) ------------------------------------------------------ */
.icnx26 *, .icnx26 *::before, .icnx26 *::after { box-sizing: border-box; }
.icnx26 h1, .icnx26 h2, .icnx26 h3, .icnx26 h4, .icnx26 p, .icnx26 figure,
.icnx26 ul, .icnx26 ol, .icnx26 dl, .icnx26 dd { margin: 0; }
.icnx26 ul, .icnx26 ol { padding: 0; list-style: none; }
.icnx26 img { max-width: 100%; height: auto; display: block; }
.icnx26 a { color: inherit; text-decoration: none; }
.icnx26 button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.icnx26 table { border-collapse: collapse; width: 100%; }

/* --- 타입 스케일의 기준점 -------------------------------------------------
   2026-09-04 오너: "지금 영문 폰트 기준으로 가장 작게 잡아서 폰트가 작으니까
   … 콘텐츠 부분에서의 폰트 사이즈도 전체적으로 조금 키워줘야돼".
   이 스타일시트는 .eyebrow 부터 .tt-meta 까지 크기를 전부 rem 으로 적었다 —
   즉 100군데 가까운 선언이 루트 글꼴 크기 하나에 매달려 있다. 그래서 개별
   선언을 손대는 대신 기준점만 한 단 올린다: 본문·카드·표·푸터가 서로의 비율을
   그대로 지키면서 함께 커지고, 되돌리거나 더 키울 때도 이 한 줄만 움직이면 된다.
   16px 기본에서 17.6px 이 되어 카드 설명 .88rem 은 14.1px → 15.5px, 표의
   .74rem 은 11.8px → 13.0px 로 올라간다. vw 로 묶인 clamp() 의 중간값은 그대로
   이므로 큰 제목은 rem 상한에 걸리는 넓은 화면에서만 따라 올라간다.
   px 가 아니라 %인 이유: 브라우저 글꼴 크기를 키워 둔 사용자의 설정을 덮어쓰지
   않고 그 위에 같은 비율로 얹기 위해서다. */
html.icnx26-root { background: #03041f; font-size: 110%; }
body.icnx26 { margin: 0; overflow-x: hidden; }

/* --- shared --------------------------------------------------------------*/
.icnx26 .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 20px; }
.icnx26 .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;
}
.icnx26 .skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 10px 18px; border-radius: 0 0 10px 10px;
  background: var(--magenta); color: #16062b; font-weight: 700;
  transition: top .2s var(--ease);
}
.icnx26 .skip-link:focus { top: 0; }
.icnx26 :focus-visible { outline: 2px solid var(--magenta-b); outline-offset: 3px; border-radius: 4px; }

.icnx26 .section { padding-block: clamp(56px, 7vw, 104px); position: relative; }
.icnx26 .section + .section { border-top: 1px solid var(--line); }

.icnx26 .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lavender);
}
.icnx26 .eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--magenta));
}
.icnx26 .section-title {
  margin-top: 14px;
  font-size: clamp(1.65rem, 3.4vw, 2.6rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
}
.icnx26 .section-lead {
  margin-top: 14px; max-width: 68ch;
  color: var(--ink-2); font-size: clamp(.95rem, 1.5vw, 1.06rem);
}
/* keep-all above is what removes the broken word; this only asks the browser
   not to leave a single short 어절 sitting alone on the last line of a
   flowing paragraph. It is a hint — where it is unsupported the paragraph
   simply wraps as before, still without a mid-word break. */
.icnx26 .section-lead,
.icnx26 .highlight-desc,
.icnx26 .modal-section p { text-wrap: pretty; }
.icnx26 .section-head { margin-bottom: clamp(28px, 4vw, 48px); }

/* --- ambient bridge glow ------------------------------------------------- */
.icnx26 .glow-field {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 42% at 78% 6%,  rgba(224,124,203,.16), transparent 68%),
    radial-gradient(50% 40% at 12% 32%, rgba(139,107,214,.14), transparent 70%),
    radial-gradient(70% 46% at 50% 104%, rgba(255,190,134,.09), transparent 70%);
}
.icnx26 .page { position: relative; z-index: 1; }

/* ==========================================================================
   Header
   ========================================================================== */
.icnx26 .site-header {
  position: fixed; inset: 0 0 auto; z-index: 90;
  background: rgba(5, 6, 53, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.icnx26 .header-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); }
.icnx26 .brand { display: flex; align-items: center; flex-shrink: 0; }
.icnx26 .brand img { height: 19px; width: auto; }
.icnx26 .nav-desktop { display: none; }
.icnx26 .nav-desktop > ul { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.icnx26 .nav-desktop li { position: relative; }
.icnx26 .nav-desktop a {
  position: relative; padding: 6px 0; font-size: .93rem; font-weight: 600;
  color: var(--ink-2); transition: color .22s var(--ease);
}
.icnx26 .nav-desktop a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--magenta), var(--violet));
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.icnx26 .nav-desktop a:hover, .icnx26 .nav-desktop a[aria-current="page"] { color: var(--ink); }
.icnx26 .nav-desktop a:hover::after, .icnx26 .nav-desktop a[aria-current="page"]::after { transform: scaleX(1); }

/* 프로그램 submenu — a real dropdown, never a #section jump. It opens on
   :hover/:focus-within with no JavaScript; the script adds click, Escape
   and ArrowDown by driving [data-open], which wins over both. */
.icnx26 .nav-trigger {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 0; font-size: .93rem; font-weight: 600;
  color: var(--ink-2); transition: color .22s var(--ease);
}
.icnx26 .nav-trigger::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--magenta), var(--violet));
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease);
}
.icnx26 .nav-trigger:hover, .icnx26 .nav-trigger.is-active { color: var(--ink); }
.icnx26 .nav-trigger:hover::after, .icnx26 .nav-trigger.is-active::after { transform: scaleX(1); }
.icnx26 .nav-trigger .chev { transition: transform .24s var(--ease); }
.icnx26 .has-dropdown[data-open="true"] > .nav-trigger .chev { transform: rotate(180deg); }

.icnx26 .nav-dropdown {
  position: absolute; top: calc(100% + 12px); left: 50%; margin-left: -100px;
  width: 200px; padding: 8px; z-index: 5;
  border: 1px solid var(--line-2); border-radius: 14px;
  background: rgba(8, 7, 66, .97);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 44px rgba(3, 4, 31, .6);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
/* invisible bridge so the pointer can cross the gap to the panel */
.icnx26 .nav-dropdown::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.icnx26 .nav-dropdown a {
  display: block; padding: 10px 14px; border-radius: 9px;
  font-size: .9rem; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.icnx26 .nav-dropdown a::after { content: none; }
.icnx26 .nav-dropdown a:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.icnx26 .nav-dropdown a[aria-current="page"] {
  color: #17032c; background: linear-gradient(102deg, var(--magenta), var(--violet));
}
.icnx26 .has-dropdown:hover > .nav-dropdown,
.icnx26 .has-dropdown:focus-within > .nav-dropdown,
.icnx26 .has-dropdown[data-open="true"] > .nav-dropdown { opacity: 1; visibility: visible; transform: none; }
/* explicit close wins over :hover/:focus-within (Escape, outside click) */
.icnx26 .has-dropdown[data-open="false"] > .nav-dropdown { opacity: 0; visibility: hidden; transform: translateY(-6px); }

.icnx26 .nav-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 9px; border-radius: 10px;
  border: 1px solid var(--line-2);
}
.icnx26 .nav-toggle span {
  display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.icnx26 .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.icnx26 .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.icnx26 .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.icnx26 .nav-mobile {
  position: fixed; inset: var(--header-h) 0 auto; z-index: 89;
  max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  background: rgba(5, 6, 53, .97);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.icnx26 .nav-mobile[data-open="true"] { transform: none; opacity: 1; visibility: visible; }
.icnx26 .nav-mobile > ul { padding: 12px 20px 26px; }
.icnx26 .nav-mobile a {
  display: block; padding: 15px 4px; font-size: 1.05rem; font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.icnx26 .nav-mobile a[aria-current="page"] { color: var(--magenta-b); }
.icnx26 .nav-mobile .btn { margin-top: 20px; width: 100%; }

/* 프로그램 nested disclosure. Ships expanded so it works with no JavaScript. */
.icnx26 .m-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 15px 4px; text-align: left;
  font-size: 1.05rem; font-weight: 600; border-bottom: 1px solid var(--line);
}
.icnx26 .m-trigger .chev { flex-shrink: 0; transition: transform .24s var(--ease); }
.icnx26 .m-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.icnx26 .m-has-sub.is-active > .m-trigger { color: var(--magenta-b); }
/* An open 프로그램 owns the panel below it, so the rule that separates primary
   items must not run between the trigger and its own children. */
.icnx26 .m-trigger[aria-expanded="true"] { border-bottom-color: transparent; }

/* The desktop submenu is a floating panel, so its nesting is self-evident.
   Here the children sit in the same column as the primary items, so the
   nesting has to be drawn: an inset panel behind a left rail, with lighter
   type and hairline separators that stop short of the full row width. */
.icnx26 .m-subnav {
  margin: 0 4px 6px 12px;
  border-left: 2px solid var(--line-2);
  border-radius: 0 12px 12px 0;
  background: rgba(255, 255, 255, .04);
}
.icnx26 .m-subnav a {
  padding: 13px 14px 13px 18px;
  font-size: .95rem; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.icnx26 .m-subnav li:last-child a { border-bottom: 0; }

@media (min-width: 1024px) {
  .icnx26 { --header-h: 76px; }
  .icnx26 .brand img { height: 23px; }
  .icnx26 .nav-desktop { display: block; }
  .icnx26 .nav-toggle { display: none; }
  .icnx26 .nav-mobile { display: none; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.icnx26 .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px;
  font-size: .95rem; font-weight: 700; letter-spacing: -.01em;
  border: 1px solid transparent; text-align: center;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease);
}
.icnx26 .btn-primary {
  background: linear-gradient(102deg, var(--magenta) 0%, var(--violet) 100%);
  color: #17032c; box-shadow: 0 8px 26px rgba(224,124,203,.28);
}
.icnx26 .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(224,124,203,.38); }
.icnx26 .btn-ghost { border-color: var(--line-2); color: var(--ink); background: rgba(255,255,255,.03); }
.icnx26 .btn-ghost:hover { border-color: var(--magenta); background: rgba(224,124,203,.10); transform: translateY(-2px); }

/* A CTA whose link is not configured yet keeps its own silhouette and simply
   does nothing — no badge, no separate skin. The customer had every
   availability notice removed from the site, so the only remaining signal is
   the real disabled state, which assistive tech announces on its own. */
.icnx26 .btn:disabled { cursor: default; }
.icnx26 .btn-primary:disabled:hover, .icnx26 .btn-ghost:disabled:hover { transform: none; }
.icnx26 .btn-ghost:disabled:hover { border-color: var(--line-2); background: rgba(255,255,255,.03); }
.icnx26 .btn-primary:disabled:hover { box-shadow: 0 8px 26px rgba(224,124,203,.28); }

/* ==========================================================================
   Hero — the customer reference's composition
   --------------------------------------------------------------------------
   The key visual is used as a clean plate (the bridge photograph with no type
   on it) behind real elements, instead of one flattened master with the CTAs
   pinned over it. Every measure below is the reference's own number.
   ========================================================================== */
/* Every route's <main> clears the fixed header; the hero needs nothing extra. */
.icnx26 .route-main { padding-top: var(--header-h); }
.icnx26 .hero { position: relative; }

/* Plate colour sampled from the reference (#02003f); it is only ever seen in
   the moment before the photograph paints. min-height is the floor the
   reference sets — the band grows if the type block ever needs more room. */
.icnx26 .hero-plate {
  position: relative; min-height: 640px; overflow: hidden; background: #02003f;
}
/* The reference sets the plate as a cover background. It is an <img> here so
   the preload scanner finds it and so it keeps the site-wide mtime stamp;
   object-fit reproduces `center / cover` exactly, which is what makes the
   bridge stay framed from a phone to an ultrawide. */
.icnx26 .hero-plate-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
/* Left-to-right scrim: holds contrast under the type block on the left and
   clears completely by 60%, so the lit bridge is never dulled. */
.icnx26 .hero-plate::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(2,0,58,.45) 0%, rgba(2,0,58,0) 60%);
}
.icnx26 .hero-inner { position: relative; z-index: 2; padding-block: 88px 56px; }

/* The wordmark is the page's h1; the slogan lockup carries the tagline as its
   alt. Both are percentage-capped, so they shrink with the viewport instead of
   overflowing the way a baked-in master would. */
.icnx26 .hero-lockup img { width: min(560px, 80%); }
.icnx26 .hero-slogan { width: min(520px, 78%); margin-top: 34px; }

.icnx26 .hero-when { margin-top: 56px; color: #fff; }
.icnx26 .hero-date  { font-size: clamp(1.375rem, 2.6vw, 2rem);    font-weight: 800; }
.icnx26 .hero-venue { font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 700; margin-top: 14px; }
.icnx26 .hero-sub   { font-size: .875rem; letter-spacing: .06em; color: #d9d4f7; }
.icnx26 .hero-venue + .hero-sub { font-size: .8125rem; }

.icnx26 .hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.icnx26 .hero-hosts { width: min(880px, 100%); margin-top: 64px; }

/* --- key-visual CTA pair -------------------------------------------------- */
/* The reference's own button: 56px tall, 28px side padding, 14px radius, and a
   pale-lilac fill on the 등록 CTA against an outlined 비즈매칭 CTA. */
.icnx26 .kv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; padding: 0 28px; border-radius: 14px;
  border: 1px solid transparent;
  font-size: 1rem; font-weight: 700; white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s var(--ease),
              border-color .2s var(--ease);
}
.icnx26 .kv-btn svg { flex: none; width: 20px; height: 20px; }
.icnx26 .kv-btn-primary { background: #e4d2e8; border-color: #e4d2e8; color: #14103a; }
.icnx26 .kv-btn-ghost   { background: transparent; border-color: rgba(228,210,232,.5); color: #fff; }
.icnx26 a.kv-btn-primary:hover { background: #f3e8f4; border-color: #f3e8f4; transform: translateY(-2px); }
.icnx26 a.kv-btn-ghost:hover   { background: rgba(228,210,232,.10); transform: translateY(-2px); }
.icnx26 .kv-btn:disabled { cursor: default; }

/* Below 600px a 28px-padded row of two Korean labels no longer fits on one
   line, so the reference lets each button wrap and take the full width. */
@media (max-width: 600px) {
  .icnx26 .hero-btns { flex-direction: column; }
  .icnx26 .kv-btn {
    width: 100%; height: auto; min-height: 52px;
    padding: 12px 18px; white-space: normal;
  }
}

/* The Date/Venue/Host card that used to sit under the plate is gone at the
   customer's request; the plate already carries every fact it repeated. Its
   .hero-summary / .hero-card / .hero-facts geometry went with it — only the
   CTA row survives, because the 행사소개 block reuses it. */
.icnx26 .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.icnx26 .hero-ctas .btn { flex: 1 1 240px; }


/* --- theme lockup (About head, program day head) -------------------------- */
.icnx26 .theme-en { letter-spacing: .01em; }
.icnx26 .theme-ko {
  margin-top: 10px; font-size: clamp(1rem, 1.9vw, 1.22rem); font-weight: 700;
  letter-spacing: -.01em; color: var(--lavender);
}

/* --- 행사소개 highlights (home) ------------------------------------------- */
.icnx26 .highlight-grid {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: clamp(28px, 4vw, 44px);
}
.icnx26 .highlight {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2); padding: 22px 20px 24px; text-align: center;
}
.icnx26 .highlight-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; margin-bottom: 14px; border-radius: 50%;
  color: var(--magenta-b);
  border: 1px solid rgba(224,124,203,.34); background: rgba(224,124,203,.08);
}
.icnx26 .highlight-title { font-size: 1.02rem; font-weight: 800; }
.icnx26 .highlight-desc { margin-top: 8px; font-size: .88rem; line-height: 1.65; color: var(--ink-2); }

/* ==========================================================================
   About
   ========================================================================== */
/* --- centred head, per the customer's layout reference --------------------
   The reference stacks the head on one axis: the event name largest, the
   theme lockup under it on two lines, then the vision paragraph as a centred
   block. Its type scale was measured off the supplied image rather than
   guessed — on that 776px canvas the name's cap height is 34px against the
   lockup's 23px (1.48x), and the paragraph's Latin caps measure the same 23px
   as the lockup, so the two set at one size. The scale below keeps those
   ratios at 52 / 36 / 24px, in a column capped near the reference's own
   width. Only the About head takes this scale — .eyebrow, .section-title and
   .section-lead keep their site-wide sizes everywhere else — so every rule
   below is qualified with .about-head. */
.icnx26 .about-head { text-align: center; max-width: 820px; margin-inline: auto; }
/* The name is the head's display line here, not a label: it takes the largest
   size and drops the eyebrow's leading rule, which a centred stack has no
   place for. */
.icnx26 .about-head .eyebrow {
  display: block;
  font-size: clamp(2.05rem, 4.6vw, 3.25rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
  text-transform: none; color: var(--ink);
}
.icnx26 .about-head .eyebrow::before { content: none; }
.icnx26 .about-head .section-title {
  margin-top: 8px;
  font-size: clamp(1.4rem, 3.1vw, 2.25rem);
  font-weight: 700; line-height: 1.28;
}
/* The lockup always keeps the reference's two lines. */
.icnx26 .about-head .head-line { display: block; }
/* The Korean line of the lockup — the reference image does not carry it, so it
   is set at the paragraph's size and keeps its accent colour, which reads as
   part of the lockup rather than competing with it. */
.icnx26 .about-head .theme-ko {
  margin-top: 12px; font-size: clamp(1.05rem, 2.1vw, 1.5rem);
}
.icnx26 .about-head .section-lead {
  margin-top: clamp(32px, 4.6vw, 56px); margin-inline: auto; max-width: 100%;
  font-size: clamp(1.05rem, 2.1vw, 1.5rem); line-height: 1.7;
}
/* Each sentence of the paragraph is its own line the way the reference breaks
   it; below 720px they run together again and wrap on their own. */
.icnx26 .about-head .lead-line { display: block; }
@media (max-width: 720px) {
  .icnx26 .about-head .lead-line { display: inline; }
}

.icnx26 .about-grid { display: grid; gap: clamp(28px, 4vw, 52px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .icnx26 .about-grid { grid-template-columns: minmax(0,1.35fr) minmax(0,.85fr); } }

/* 행사개요 heading — the 2025 page's own size, weight and placement:
   text-3xl / md:text-4xl / lg:text-5xl, extrabold, centred then left-aligned. */
.icnx26 .about-year {
  font-size: clamp(1.875rem, 3.4vw, 3rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.5; text-align: center;
}
@media (min-width: 768px) { .icnx26 .about-year { text-align: left; } }

.icnx26 .fact-table { margin-top: 26px; border-top: 1px solid var(--line-2); }
.icnx26 .fact-row {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px;
  padding: 14px 2px; border-bottom: 1px solid var(--line); align-items: baseline;
}
.icnx26 .fact-row dt { font-size: .88rem; font-weight: 700; color: var(--lavender); }
.icnx26 .fact-row dd { font-size: clamp(.95rem, 1.5vw, 1.05rem); font-weight: 600; }
@media (min-width: 560px) { .icnx26 .fact-row { grid-template-columns: 116px 1fr; } }

.icnx26 .poster {
  border-radius: var(--radius-l); overflow: hidden;
  border: 1px solid var(--line-2); box-shadow: 0 20px 52px rgba(3,4,31,.55);
}

.icnx26 .host-strip { margin-top: 34px; display: grid; gap: 18px; }
.icnx26 .host-block dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 7px;
}
.icnx26 .host-block dd { display: flex; flex-wrap: wrap; gap: 8px; }
.icnx26 .host-chip {
  padding: 6px 14px; border-radius: 999px; font-size: .86rem; font-weight: 600;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03);
}
@media (min-width: 620px) { .icnx26 .host-strip { grid-template-columns: 1fr 1fr; } }

/* --- video --------------------------------------------------------------- */
.icnx26 .video-block { margin-top: clamp(40px, 5vw, 64px); }
.icnx26 .video-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-l); overflow: hidden;
  border: 1px solid var(--line-2); background: var(--navy-850);
}
.icnx26 .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.icnx26 .video-note {
  margin-top: 12px; font-size: .86rem; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.icnx26 .year-tag {
  font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  padding: 2px 9px; border-radius: 999px;
  color: var(--amber); background: rgba(255,190,134,.13); border: 1px solid rgba(255,190,134,.3);
}

/* ==========================================================================
   Tabs (program day + exhibition zone)
   ========================================================================== */
.icnx26 .tablist {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px;
  padding: 6px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); width: fit-content; max-width: 100%;
}
.icnx26 .tab {
  padding: 10px 20px; border-radius: 999px; font-size: .93rem; font-weight: 700;
  color: var(--ink-3); white-space: nowrap;
  transition: color .22s var(--ease), background-color .22s var(--ease);
}
.icnx26 .tab[aria-selected="true"] {
  color: #17032c; background: linear-gradient(102deg, var(--magenta), var(--violet));
}
.icnx26 .tab:hover:not([aria-selected="true"]) { color: var(--ink); background: rgba(255,255,255,.05); }
.icnx26 .tabpanel[hidden] { display: none; }

/* 프로그램 하위 메뉴 — separate documents, so links rather than tabs. */
.icnx26 .subnav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(26px, 3.4vw, 38px); }
.icnx26 .subnav a {
  display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px;
  font-size: .9rem; font-weight: 700; color: var(--ink-3); white-space: nowrap;
  border: 1px solid var(--line); background: rgba(255,255,255,.02);
  transition: color .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
}
.icnx26 .subnav a:hover { color: var(--ink); border-color: var(--line-2); background: rgba(255,255,255,.05); }
.icnx26 .subnav a[aria-current="page"] {
  color: #17032c; border-color: transparent;
  background: linear-gradient(102deg, var(--magenta), var(--violet));
}


/* ==========================================================================
   Timetable
   ========================================================================== */
/* 2026-09-04 오너 — 표 색상·디자인
   "연한 색 때문에 구분과 가독성이 떨어지므로, 2025년처럼 진한 색으로 프로그램
   유형을 명확히 나눈다 … 시간·장소·설명 영역: 흰색 또는 아주 옅은 회색 …
   글자: 진한 배경에는 흰색 굵은 글자, 밝은 본문에는 짙은 남색/검정".

   그래서 표만 밝은 판이 된다 — 2025 표가 흰 표에 진한 색 블록을 얹은 모양이고,
   '밝은 본문에는 짙은 남색'은 밝은 바탕이 있어야 성립하는 규칙이다. 페이지의
   나머지(어두운 남색)는 한 줄도 건드리지 않는다.

   표의 밝은 면·글자·선은 아래 여섯 변수에만 적혀 있다. 다시 어두운 표로
   돌리려면 이 여섯 줄만 되돌리면 되고 나머지 규칙은 그대로 쓰인다. */
.icnx26 .timetable-wrap {
  --tt-surface:   #ffffff;   /* 설명·블록 바탕 */
  --tt-surface-2: #f4f5f9;   /* 시간축 등 아주 옅은 회색 */
  --tt-line:      #dfe2ee;
  --tt-line-2:    #c7cddf;
  --tt-text:      #16183d;   /* 짙은 남색 본문 */
  --tt-text-2:    #3c4269;
  --tt-text-3:    #6b7191;
  /* 그 날의 헤더 색 — "Day 1: 딥 블루, Day 2: 딥 퍼플". */
  --tt-day:       #122c74;
  border: 1px solid var(--tt-line-2); border-radius: var(--radius-l);
  background: var(--tt-surface); color: var(--tt-text); overflow: hidden;
}
.icnx26 .timetable-wrap.is-day2 { --tt-day: #4a1d7a; }
.icnx26 .timetable-scroll { overflow-x: auto; }

/* 프로그램 유형별 고정 색상(2026-09-04 오너). 블록·모바일 항목이 is-type-<키>
   로 제 색을 고르고, 그 아래 규칙은 전부 var(--tt-type) 하나만 읽는다 — 색을
   바꿀 곳은 언제나 이 표 한 곳이다. 모두 흰 굵은 글자에서 명도대비 5:1 이상.
   .is-type-etc(리셉션)는 오너가 색을 지정하지 않은 부대 프로그램이라 B2C 와 같은
   그레이를 쓰되 배지 글자로 구분된다 — program-render.php 의 PROGRAM_TYPES. */
.icnx26 .tt-session, .icnx26 .tt-item     { --tt-type: #475069; }
.icnx26 .tt-session.is-type-opening,
.icnx26 .tt-item.is-type-opening          { --tt-type: #c0233a; }  /* 개막식 · 레드 */
.icnx26 .tt-session.is-type-keynote,
.icnx26 .tt-item.is-type-keynote          { --tt-type: #6b2fa8; }  /* 키노트 · 퍼플 */
.icnx26 .tt-session.is-type-session,
.icnx26 .tt-item.is-type-session          { --tt-type: #1b4bb8; }  /* 세션 · 블루 */
.icnx26 .tt-session.is-type-talk,
.icnx26 .tt-item.is-type-talk             { --tt-type: #b8500c; }  /* 토크콘서트 · 오렌지 */
.icnx26 .tt-session.is-type-b2b,
.icnx26 .tt-item.is-type-b2b              { --tt-type: #12734a; }  /* B2B 비즈매칭 · 그린 */
.icnx26 .tt-session.is-type-b2c,
.icnx26 .tt-item.is-type-b2c              { --tt-type: #475069; }  /* B2C 전시·체험 · 그레이 */
.icnx26 .tt-session.is-type-etc,
.icnx26 .tt-item.is-type-etc              { --tt-type: #475069; }  /* 리셉션 · 그레이 */
/* .is-soft(하루 종일 열려 있는 B2C 블록)는 색 규칙을 더 갖지 않는다 — 그 "조용한"
   표현을 이제 유형 그레이가 그대로 한다. 마크업의 클래스는 데이터의 tone 을
   그대로 비추는 표시로 남겨 둔다. */

/* Desktop: real time-axis grid. --row is the height of one 5-minute slice. */
.icnx26 .timetable { display: none; }
.icnx26 .timetable-head, .icnx26 .timetable-body {
  display: grid; grid-template-columns: 74px repeat(3, minmax(160px, 1fr)); min-width: 640px;
}
/* Not sticky: .timetable-scroll is an overflow container, so sticky would
   anchor to it rather than the viewport and read as a bug. */
/* 헤더는 그 날의 진한 색 한 판에 흰 굵은 글자 — DAY 1 딥 블루, DAY 2 딥 퍼플. */
.icnx26 .timetable-head { background: var(--tt-day); }
.icnx26 .timetable-head > * { padding: 13px 12px; font-size: .86rem; font-weight: 800; text-align: center; color: #fff; }
.icnx26 .timetable-head > * + * { border-left: 1px solid rgba(255,255,255,.24); }
/* 시간 only — the day's date was taken out of this cell on the customer's ask
   ("11월 3일(화) 11월 4일(수) 이 부분 표에서 없애주는거"). */
.icnx26 .th-time { color: rgba(255,255,255,.80); }

/* --row is the height of one 5-minute slice. At 8px the shortest printed block
   (개회식, 25분 = 40px) could not fit its own title and time, which is the
   "표 디자인 잘림" the deck reports. 10px clears it.

   2026-09-03 오너: "내용이 있는 시간 구간만 높이가 자동 확장되게". 그래서 행은
   더 이상 var(--row) 고정이 아니라 minmax(var(--row), auto)다 — 5분당 10px가
   최소 높이로 남고, 세션 상세를 품은 블록이 제가 걸친 행만 필요한 만큼 늘린다.
   상세가 없는 시간대는 최소 높이 그대로라 표의 시간 비례는 유지된다.
   --rows(행 개수)는 그 날의 시간축에서 나오므로 PHP가 인라인으로 넘긴다. */
.icnx26 .timetable-body {
  --row: 10px; position: relative; padding-bottom: 4px;
  grid-template-rows: repeat(var(--rows, 1), minmax(var(--row), auto));
}
/* 시간축과 각 트랙은 부모의 행 선을 그대로 물려받아야 한 행이 늘어날 때 세
   열이 함께 늘어난다 — subgrid 없이 각자 제 행을 계산하면 열이 어긋난다.
   행 subgrid를 모르는 브라우저는 아래 기본 선언(부모와 같은 트랙 목록)으로
   떨어진다: 세로로 잘리는 곳은 없고 모든 블록이 제 내용을 다 보여주지만,
   시간 라벨과 옆 트랙이 A홀 기준 최대 70px까지 밀린다(DAY 1, 1280px 실측).
   Chrome 117+/Safari 16+/Firefox 71+ 는 이 fallback을 타지 않는다. */
.icnx26 .tt-axis,
.icnx26 .tt-track { grid-template-rows: repeat(var(--rows, 1), minmax(var(--row), auto)); }
@supports (grid-template-rows: subgrid) {
  .icnx26 .tt-axis,
  .icnx26 .tt-track { grid-template-rows: subgrid; }
}
/* 시간축은 "아주 옅은 회색"에 짙은 남색 글자 — 본문 가독성(2026-09-04 오너). */
.icnx26 .tt-axis { grid-column: 1; display: grid; background: var(--tt-surface-2); }
.icnx26 .tt-hour {
  grid-column: 1; border-top: 1px solid var(--tt-line); padding: 4px 10px 0;
  font-size: .78rem; font-weight: 700; color: var(--tt-text-2); text-align: center;
}
.icnx26 .tt-track { position: relative; border-left: 1px solid var(--tt-line); display: grid; }
.icnx26 .tt-rule { border-top: 1px solid var(--tt-line); pointer-events: none; }

/* 블록은 두 영역으로 나뉜다 — "색을 넣을 범위: 전체 행 배경이 아니라 '프로그램명
   셀', 좌측 컬러 바 또는 유형 배지에만"(2026-09-04 오너).
     .tt-head   프로그램명+시간. 유형 색 바탕에 흰 굵은 글자.
     .tt-detail 주제·좌장·연사(설명). 흰 바탕에 짙은 남색.
   상세가 없는 블록은 머리가 칸을 다 채우므로 2025 표처럼 한 덩어리로 읽히고,
   상세가 있는 블록은 색이 머리에서 멈춘다. 패딩은 두 영역이 각자 갖는다. */
.icnx26 .tt-session {
  margin: 2px 6px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--tt-line);
  border-left: 5px solid var(--tt-type);   /* 좌측 컬러 바 */
  background: var(--tt-surface); color: var(--tt-text);
  display: flex; flex-direction: column; text-align: center;
}
.icnx26 .tt-head {
  flex: 1 0 auto; padding: 8px 11px;
  background: var(--tt-type); color: #fff;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 2px;
}
.icnx26 .tt-head .tt-title { color: #fff; font-weight: 800; }
.icnx26 .tt-head .tt-meta { color: rgba(255,255,255,.86); }
/* Short blocks keep the same box but a tighter type scale, so a 25-minute row
   never has to clip. */
.icnx26 .tt-session.is-compact .tt-head { padding: 5px 9px; gap: 1px; }
.icnx26 .tt-session.is-compact .tt-title { font-size: .82rem; line-height: 1.25; }
.icnx26 .tt-session.is-compact .tt-meta { font-size: .71rem; }
/* One session across every track column — DAY 2's 리셉션. 색은 제 유형이 준다. */
.icnx26 .tt-session.is-full { z-index: 2; margin-inline: 6px; }
.icnx26 .tt-title { font-size: .88rem; font-weight: 700; line-height: 1.3; }
.icnx26 .tt-track .tt-session, .icnx26 .timetable-body > .tt-session { min-width: 0; }
.icnx26 .tt-meta { font-size: .74rem; color: var(--tt-text-3); letter-spacing: .01em; }
/* Two sessions share a track column: tighten so both stay readable. */
.icnx26 .tt-session.is-narrow { margin-inline: 3px; }
.icnx26 .tt-session.is-narrow .tt-head { padding: 7px 8px; }
.icnx26 .tt-session.is-narrow .tt-title { font-size: .8rem; }
.icnx26 .tt-session.is-narrow .tt-meta { font-size: .7rem; }

/* --- 세션 상세, 이제 표 칸 안 (2026-09-03 오너) ---------------------------
   "일반 세션 상세 내용을 시간표 칸 안으로 옮기고 … 모바일에도 동일하게 적용".
   표 아래 .session-details 카드가 쓰던 규칙 대신, 상세를 품은 블록이 세션명·
   시간 밑에 같은 항목을 그대로 싣는다. 한 벌의 규칙을 데스크톱 블록(.tt-session)
   과 모바일 항목(.tt-item)이 함께 쓰고, 정렬만 각 화면의 기존 관례를 따른다 —
   표는 가운데("표 내 텍스트 중앙정렬(전체)"), 모바일 목록은 왼쪽.
   사람 줄의 .sd-person/.sd-cat/.sd-org/.sd-no 는 옮기기 전 그대로다. */
/* 설명은 언제나 밝은 바탕에 짙은 남색이다 — 유형 색은 위 .tt-head 에서 멈춘다. */
.icnx26 .tt-detail {
  align-self: stretch; width: 100%;
  background: var(--tt-surface); color: var(--tt-text);
  border-top: 1px solid var(--tt-line);
}
.icnx26 .tt-session .tt-detail { padding: 9px 11px; }
.icnx26 .tt-topic { margin: 0; font-size: .8rem; font-weight: 700; line-height: 1.45; }
/* 주제가 여러 줄이면 데이터가 끊어 준 자리에서 정확히 끊는다 — "주제는 줄바꿈
   해주세요"(2026-09-03). 줄 자체는 여전히 제 칸 폭에서 접히므로 좁은 화면에서
   글자가 넘치지 않는다. 한 줄짜리 주제는 예전과 같은 한 칸이라 달라지지 않는다. */
.icnx26 .tt-topic-line { display: block; }
.icnx26 .tt-facts { display: grid; gap: 6px; margin: 0; }
.icnx26 .tt-topic + .tt-facts { margin-top: 7px; }
.icnx26 .tt-fact { display: grid; gap: 1px; }
/* 라벨(좌장/연사/참가사)만 유형 색을 빌려 쓴다 — 흰 바탕에서 모두 대비 5:1 이상. */
.icnx26 .tt-fact dt {
  font-size: .7rem; font-weight: 800; letter-spacing: .06em; color: var(--tt-type);
}
.icnx26 .tt-fact dd { margin: 0; font-size: .78rem; line-height: 1.45; color: var(--tt-text); }
/* 상세를 품은 블록은 제 시간 구간을 넓혀 내용을 담으므로 내용을 위에서부터
   쌓는다 — 옆 트랙이 같은 시간대를 더 넓혀도 상세가 칸 한가운데로 떠오르지
   않는다. 상세가 없는 블록의 세로 가운데 정렬은 그대로다. */
.icnx26 .tt-session.is-detailed .tt-head { flex: 0 0 auto; }
.icnx26 .tt-session.is-detailed .sd-person + .sd-person { margin-top: 4px; }

/* Mobile: chronological list per track */
.icnx26 .timetable-list { padding: 6px; }
.icnx26 .tt-group + .tt-group { margin-top: 10px; }
.icnx26 .tt-group-head {
  padding: 12px 12px 8px; font-size: .82rem; font-weight: 800;
  letter-spacing: .1em; color: var(--tt-text-3); text-transform: uppercase;
}
.icnx26 .tt-item {
  display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: baseline;
  padding: 12px; border-radius: 10px;
  border: 1px solid var(--tt-line);
  border-left: 5px solid var(--tt-type);   /* 좌측 컬러 바 */
  background: var(--tt-surface); color: var(--tt-text);
}
.icnx26 .tt-item + .tt-item { margin-top: 7px; }
.icnx26 .tt-item time { font-size: .8rem; font-weight: 700; color: var(--tt-text-2); font-variant-numeric: tabular-nums; }
.icnx26 .tt-item .tt-title { font-size: .93rem; font-weight: 800; color: var(--tt-text); }
.icnx26 .tt-item .tt-meta { font-size: .76rem; color: var(--tt-text-3); }
/* "색상만으로 구분하지 말고 프로그램 유형 텍스트도 함께 표시"(2026-09-04 오너) —
   진한 유형 색 위에 흰 굵은 글자로 유형 이름을 적는다. */
.icnx26 .tt-type {
  display: inline-block; margin: 0 6px 3px 0; padding: 2px 9px; border-radius: 999px;
  background: var(--tt-type); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
/* 상세를 실은 항목은 시간 칸과 내용 칸이 같은 줄에서 시작해야 읽힌다 —
   baseline 정렬이면 시간이 상세 첫 줄에 끌려 내려간다. */
.icnx26 .tt-item.is-detailed { align-items: start; }
.icnx26 .tt-item .tt-detail { margin-top: 9px; padding-top: 9px; }
/* 아주 좁은 화면에서는 시간 칸을 위로 올려 내용에 폭을 다 준다. */
@media (max-width: 400px) {
  .icnx26 .tt-item.is-detailed { grid-template-columns: 1fr; gap: 6px; }
}

@media (min-width: 860px) {
  .icnx26 .timetable { display: block; }
  .icnx26 .timetable-list { display: none; }
}

/* --- 사전등록 band ------------------------------------------------------- */
/* 2026-09-02: 두 날 모두 .is-solo 로 렌더되므로 .register-band-label 규칙은
   쓰는 곳이 없어 지웠다. 밴드와 버튼 규칙 자체는 그대로다. */
.icnx26 .register-band {
  margin-top: 24px; padding: 20px clamp(18px, 3vw, 30px);
  border: 1px solid rgba(224,124,203,.40); border-radius: var(--radius-l);
  background: linear-gradient(140deg, rgba(224,124,203,.16), rgba(27,29,85,.85) 62%);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
}
.icnx26 .register-band .btn { flex: 0 1 auto; min-width: 220px; }
/* A band carrying nothing but its CTA — space-between would push a lone button
   to the left edge, so it centres instead ("버튼만 가운데에 배치"). */
.icnx26 .register-band.is-solo { justify-content: center; }

/* ==========================================================================
   Cards (speakers + companies)
   ========================================================================== */
.icnx26 .card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); }
/* 참여 연사 row. auto-fill at minmax(216px, 1fr) resolves to five columns in the
   1200px shell, so a sixth card would drop to a second line; the roster names
   its six columns instead ("각 6장 … 데스크톱 한 줄로 배치"). It takes effect at
   the site's own desktop breakpoint — below it the shared auto-fill rule still
   applies and the cards wrap as before. The 참여기업 grids keep the shared rule:
   this request covers the 연사 row only. */
@media (min-width: 1024px) {
  .icnx26 .card-grid.is-roster { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* Six columns leave each card ~30px narrower than the five-up row did, so the
     frame gives that back from its own padding rather than from the name. */
  .icnx26 .card-grid.is-roster .card { padding: 16px 13px; }
  /* 6열로 좁아지면 카드 안쪽 폭이 123px 까지 내려가 "Technology Showcase" 라벨만
     두 줄이 되고, 그 네 카드의 사진이 17px 내려앉는다 — 원문 3항이 지적한 것과
     똑같은 어긋남이다(1024·1280·1440px 실측). 라벨 칸을 두 줄 높이로 고정해
     한 줄짜리 라벨도 같은 높이를 차지하게 하면 사진 줄이 다시 맞는다. 글자는
     .card-session 이 제 안에서 가운데로 잡고, 폰트가 대체되어 넓어져도 두 줄을
     넘지 않으므로 이 높이는 유지된다. 6열이 풀리는 1024px 아래에서는 칸이
     216px 이상이라 어느 라벨도 접히지 않는다. box-sizing 이 border-box 라 두 줄
     글상자(2 × line-height = 2.6em) 위에 위아래 padding 3px 과 테두리 1px 을
     더한 값이 그 높이다. */
  .icnx26 .card-grid.is-roster .card-session { min-height: calc(2.6em + 8px); }
}
/* 참여 연사 카드는 라운드 테이블 좌석과 같은 형태로 선다 — 2026-09-04 오너 원문
   1항 "day1 day2 참여 연사의 디자인 형식을 라운드 테이블 처럼 사진 이름 설명을
   가운데 정렬로 할꺼야". 아래 .rt-seat.is-person 이 이미 쓰는 그 규칙(세로 flex
   + 가운데 정렬)을 그대로 가져오므로 새 스타일이 생기지 않는다.

   같은 규칙이 원문 3항도 함께 푼다. 소개가 있는 카드는 <button>, 없는 카드는
   <div>인데, 브라우저 기본 스타일의 <button>은 제 내용 상자를 버튼 높이 안에서
   세로 가운데로 밀어 넣는다. 그리드가 여섯 카드의 높이를 가장 높은 카드(한정훈,
   소속이 두 줄)에 맞추므로 내용이 짧은 Blake 카드만 사진·이름이 25px 내려와
   있었다("blake 이사람만 한칸 내려와 있는데", 1440·1024px 실측). 카드가 직접
   flex 컨테이너가 되면 그 익명 상자가 사라져 <button>과 <div>가 같은 자리에서
   시작한다.

   빈 좌석(.is-seat)은 제 규칙대로 아바타를 칸 한가운데 두므로 제외한다.
   참여기업 카드(.card-grid, is-roster 아님)도 이 요청 밖이라 그대로다. */
.icnx26 .card-grid.is-roster .card:not(.is-seat) {
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; text-align: center;
}
.icnx26 .subhead {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: clamp(34px, 4.5vw, 56px) 0 18px;
}
.icnx26 .subhead h2, .icnx26 .subhead h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 800; }
.icnx26 .subhead .note { font-size: .84rem; color: var(--ink-3); }

.icnx26 .card {
  position: relative; text-align: left; width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel-2); padding: 18px; overflow: hidden;
  transition: transform .26s var(--ease), border-color .26s var(--ease), box-shadow .26s var(--ease);
}
.icnx26 button.card:hover, .icnx26 button.card:focus-visible {
  transform: translateY(-4px); border-color: rgba(224,124,203,.55);
  box-shadow: 0 16px 38px rgba(3,4,31,.55);
}
/* An unfilled roster seat, so the 참여 연사 row is laid out full rather than one
   card beside empty space ("5개 레이아웃 다 채워 넣어야돼"). Same frame, the
   neutral avatar centred in it, and no wording — every availability label is
   off the site, and this seat must not put one back.
   A seat exists only to fill out a row, so below 488px — where the grid can no
   longer fit a second 216px column and every card is its own row — there is no
   row to fill and the seats would just be dead scroll. They are decorative and
   aria-hidden, so dropping them there costs the reader nothing. */
.icnx26 .card.is-seat { display: none; }
@media (min-width: 488px) {
  /* min-height only matters on a row holding nothing else; beside a real card
     the grid stretches the seat to match it. */
  .icnx26 .card.is-seat {
    display: flex; align-items: center; justify-content: center;
    min-height: 196px; background: rgba(255,255,255,.02);
  }
  .icnx26 .card.is-seat .card-photo { margin: 0; opacity: .42; border-color: var(--line-2); }
}

.icnx26 .card-photo {
  display: block;
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden; margin-bottom: 14px;
  border: 2px solid rgba(224,124,203,.34); background: var(--navy-800);
}
.icnx26 .card-photo img { width: 100%; height: 100%; object-fit: cover; }
.icnx26 .card-name { display: block; font-size: 1.02rem; font-weight: 800; }
.icnx26 .card-org { display: block; margin-top: 3px; font-size: .85rem; color: var(--lavender); }
/* 카드 머리의 세션 라벨 — 사진 앞에 선다(2026-09-04 오너 원문 2항). 라운드
   테이블 좌석의 역할 배지(.rt-seat.is-person .rt-role)와 같은 값이라 두 카드가
   같은 배지를 쓴다. 가장 좁은 6열 트랙에서도 "Technology Showcase"가 잘리지
   않도록 배지 안에서 줄바꿈을 허용하고 글줄 간격만 좁게 잡는다. */
.icnx26 .card-session {
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px; max-width: 100%;
  font-size: .74rem; font-weight: 700; line-height: 1.3;
  padding: 3px 10px; border-radius: 999px; color: var(--ink-2);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.05);
}
.icnx26 .card-more {
  margin-top: 14px; font-size: .8rem; font-weight: 700; color: var(--magenta-b);
  display: inline-flex; align-items: center; gap: 5px;
}
/* --- 세션 상세의 사람 줄 --------------------------------------------------
   2026-09-02 개정으로 생긴 규칙인데, 2026-09-03 오너 지시("일반 세션 상세
   내용을 시간표 칸 안으로 옮기고 … 기존 세션 상세 영역은 삭제")로 상세 자체가
   표 안으로 들어갔다. 표 아래 카드 묶음을 그리던 .session-details 규칙은 쓰는
   곳이 없어 지웠고, 사람 한 줄을 그리는 이 네 개는 자리만 옮겨 그대로 쓰인다 —
   Timetable 절의 .tt-detail 을 볼 것. */
.icnx26 .sd-person { display: block; }
.icnx26 .sd-person + .sd-person { margin-top: 8px; }
/* 이 네 개는 .tt-detail 안에서만 쓰이므로 표의 밝은 면 변수를 그대로 읽는다
   (2026-09-04). 표 밖에서 쓰이는 곳이 생기면 그때 변수를 올려 잡아야 한다. */
.icnx26 .sd-cat { display: block; font-size: .8rem; font-weight: 700; color: var(--tt-text-3); }
.icnx26 .sd-org { font-weight: 600; font-size: .92em; color: var(--tt-text-2); }
.icnx26 .sd-no { color: var(--tt-type); font-weight: 800; }

/* --- company cards ------------------------------------------------------- */
.icnx26 .company-logo {
  height: 66px; margin-bottom: 14px; border-radius: 9px; background: #fff;
  display: flex; align-items: center; justify-content: center; padding: 9px;
}
.icnx26 .company-logo img { max-height: 100%; width: auto; object-fit: contain; }
/* 참여기업 칸이 '준비중'인 동안 — 2026-09-15 오너 원문 "레이아웃은 남겨두고
   (나중에 사용할꺼야) 저 5개 박스에 준비중이라고만 넣어". 틀(테두리·라운드·바탕·
   패딩)과 그리드 칸은 .card 그대로다. 높이만 기업 카드가 쌓던 값을 붙잡는다 —
   테두리 2 + 패딩 36 + 로고 66·아래 14 + "기업 소개 보기" 위 14 = 132px 에, 이름
   한 줄과 "기업 소개 보기" 한 줄의 글줄 53.63px(루트 17.6px 에서 3.047rem)을 더한
   185.63px. 390·768·1024·1280·1440px 에서 기업 카드를 잰 값과 같고, 글줄 몫이
   rem 이라 루트 글꼴 크기를 따라 함께 커진다. <div>라서 button.card 의 hover
   들림도, 포인터 커서도, 모달도 없다. */
.icnx26 .card.is-pending {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: calc(132px + 3.047rem);
  font-size: 1.02rem; font-weight: 700; color: var(--ink-3);
}

/* --- round table --------------------------------------------------------- */
.icnx26 .roundtable {
  border: 1px solid var(--line); border-radius: var(--radius-l);
  background: var(--panel-2); padding: clamp(16px, 2.4vw, 22px); overflow: hidden;
}
.icnx26 .rt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.icnx26 .rt-tag, .icnx26 .rt-time {
  font-size: .8rem; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--ink-2);
}
.icnx26 .rt-title {
  margin: 14px 0 18px; padding: 14px 16px; border-radius: 12px; text-align: center;
  font-size: clamp(.98rem, 1.7vw, 1.1rem); font-weight: 800;
  background: linear-gradient(102deg, rgba(139,107,214,.42), rgba(224,124,203,.30));
}
/* 부제는 제목과 같은 칸 안에서 한 줄 내려 한 단계 작게 앉는다 — 표 칸의 주제
   두 줄(.tt-topic-line)과 같은 순서다(2026-09-10 장표). */
.icnx26 .rt-subtitle { display: block; margin-top: 5px; font-size: .88em; font-weight: 700; }
/* 주제 없이 렌더될 때는 .rt-title이 들고 있던 간격이 사라지므로, head 바로 뒤에
   올 때만 그 자리를 대신 벌린다. 주제가 채워지면 .rt-title 마진이 다시 맡는다. */
.icnx26 .rt-head + .rt-seats { margin-top: 18px; }
/* 이름이 붙은 자리는 참여 연사 카드처럼 사진·이름·소속을 세우므로 빈 좌석보다
   높이가 늘어난다. minmax를 168px로 올려 다섯 자리가 같은 폭을 갖게 두고, 폭이
   모자라면 auto-fit이 접던 대로 접는다. */
.icnx26 .rt-seats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.icnx26 .rt-seat {
  position: relative;   /* 왼쪽 위 모서리의 .rt-no 배지가 이 카드를 기준으로 선다 */
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(255,255,255,.025); padding: 16px 14px; text-align: center;
}
.icnx26 .rt-photo {
  display: block; width: 68px; height: 68px; margin: 0 auto 12px;
  border-radius: 50%; overflow: hidden; border: 2px solid var(--line-2);
  background: var(--navy-800); opacity: .72;
}
.icnx26 .rt-photo img { width: 100%; height: 100%; object-fit: cover; }
/* 사진이 없는 좌석은 2026-09-02 개정 동안만 안쪽을 흰색으로 비웠다("실제 인물
   이미지를 넣지 말고 흰색으로 처리"). 2026-09-03 오너가 사진을 보내면서 그
   자리에 참여 연사 카드와 같은 중립 아바타가 들어갔고 — 즉 사진이 있는 좌석과
   완전히 같은 .rt-photo 규칙을 쓴다 — 흰 원 전용 규칙은 쓰는 곳이 없어졌다. */
.icnx26 .rt-role { display: block; font-size: .95rem; font-weight: 800; }

/* --- a seat with somebody in it ------------------------------------------ */
/* 빈 좌석의 흐릿한 아바타는 "아직 아무도 아님"을 뜻하므로, 실제 얼굴에는 걷어낸다.
   테두리도 연사 카드와 같은 마젠타 계열로 맞춘다. */
.icnx26 .rt-seat.is-person {
  display: flex; flex-direction: column; align-items: center; width: 100%;
  padding: 18px 14px 16px; background: var(--panel-2);
  transition: transform .26s var(--ease), border-color .26s var(--ease), box-shadow .26s var(--ease);
}
.icnx26 button.rt-seat.is-person:hover, .icnx26 button.rt-seat.is-person:focus-visible {
  transform: translateY(-4px); border-color: rgba(224,124,203,.55);
  box-shadow: 0 16px 38px rgba(3,4,31,.55);
}
.icnx26 .rt-seat.is-person .rt-photo {
  width: 84px; height: 84px; opacity: 1;
  border-color: rgba(224,124,203,.34); margin-bottom: 12px;
}
/* 이름이 주인공이 되면 역할은 그 위의 작은 배지로 물러난다. */
.icnx26 .rt-seat.is-person .rt-role {
  display: inline-block; margin-bottom: 8px; font-size: .74rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; color: var(--ink-2);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.05);
}
/* 연사 번호 — 오너가 표시해 준 그림 그대로 카드 왼쪽 위 모서리에 원을 두고 그
   안에 번호를 넣는다(이름 앞 인라인 번호는 그 자리에서 물러났다). 사진이
   가운데 정렬이라 가장 좁은 168px 트랙에서도 배지와 사진 사이가 남고, absolute
   라서 카드 높이·정렬은 건드리지 않는다. 2026-09-03 오너 지시로 색만 그림의
   붉은색에서 사이트가 이미 쓰는 핑크로 옮겼다 — 같은 ①~④ 표식인 .sd-no 와 같은
   카드 안의 .rt-more 가 쓰는 바로 그 --magenta-b 라 배지만 홀로 튀지 않는다. */
.icnx26 .rt-no {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--magenta-b); color: var(--magenta-b);
  font-size: 1rem; font-weight: 800; line-height: 1;
}
.icnx26 .rt-name { display: block; font-size: 1rem; font-weight: 800; line-height: 1.35; }
.icnx26 .rt-org {
  display: block; margin-top: 4px; font-size: .82rem; line-height: 1.45;
  color: var(--lavender); overflow-wrap: anywhere;
}
.icnx26 .rt-more {
  margin-top: auto; padding-top: 12px; font-size: .78rem; font-weight: 700;
  color: var(--magenta-b); display: inline-flex; align-items: center; gap: 5px;
}

/* --- aerial gallery ------------------------------------------------------ */
/* One 조감도(평면) per zone, at its own aspect ratio, with the gap before
   참여기업 opened up as the deck asks.

   2026-09-04 (오너 원문: "이거 지금 배경 투명 이미지인데 저 이미지 뒤에 배경색
   박스를 깔았는데 박스 깔지 말고 콘텐츠 가로 사이즈 100% 기준으로 해서 꽉 차게
   이미지 넣어야돼"): the frame is gone entirely — no fill, no border, no rounded
   corners, and so nothing left to clip. The 평면 is a transparent PNG drawn in
   white, so with the box off it sits straight on the page's own var(--navy-950)
   and still reads. The figure keeps no width cap of its own, so it takes the
   full content width of .shell and the img fills it edge to edge. */
.icnx26 .aerial-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: clamp(40px, 6vw, 72px); }
.icnx26 .aerial { width: 100%; }
.icnx26 .aerial img { display: block; width: 100%; height: auto; }
.icnx26 .aerial figcaption { padding: 10px 14px; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.icnx26 .zone-note {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  padding: 7px 15px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--ink-2);
}

/* ==========================================================================
   Biz matching — four-step 참가 흐름 (revision deck p.7)
   ========================================================================== */
.icnx26 .step-flow {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  counter-reset: none;
}
.icnx26 .step {
  position: relative; text-align: center; padding: 26px 20px 24px;
  border: 1px solid var(--line); border-radius: var(--radius-l);
  background: linear-gradient(160deg, rgba(224,124,203,.10), rgba(27,29,85,.82) 62%);
}
.icnx26 .step-no {
  display: block; font-size: .84rem; font-weight: 800; letter-spacing: .16em;
  color: var(--magenta-b);
}
.icnx26 .step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin: 12px 0 14px; border-radius: 50%;
  color: var(--ink); border: 1px solid rgba(224,124,203,.34); background: rgba(255,255,255,.05);
}
.icnx26 .step-title { font-size: 1.04rem; font-weight: 800; }
.icnx26 .step-desc { margin-top: 8px; font-size: .88rem; line-height: 1.65; color: var(--ink-2); }

/* The chevron between steps, drawn only where the steps actually sit in a row. */
@media (min-width: 1024px) {
  .icnx26 .step + .step::before {
    content: ""; position: absolute; left: -12px; top: 50%; width: 8px; height: 8px;
    border-top: 2px solid var(--line-2); border-right: 2px solid var(--line-2);
    transform: translateY(-50%) rotate(45deg);
  }
}

.icnx26 .biz-cta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: clamp(26px, 4vw, 40px);
}
.icnx26 .biz-cta .btn { flex: 0 1 auto; min-width: 240px; }

.icnx26 .biz-ops {
  margin-top: clamp(30px, 4.5vw, 48px); border-top: 1px solid var(--line-2);
}
.icnx26 .biz-op {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: 14px 2px; border-bottom: 1px solid var(--line);
}
.icnx26 .biz-op dt { font-size: .88rem; font-weight: 700; color: var(--lavender); }
.icnx26 .biz-op dd { font-size: .93rem; line-height: 1.7; color: var(--ink-2); }
@media (min-width: 720px) {
  .icnx26 .biz-op { grid-template-columns: 108px 1fr; gap: 14px; align-items: baseline; }
}

/* ==========================================================================
   Notice board
   ========================================================================== */
.icnx26 .board { border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--panel-2); overflow: hidden; }
.icnx26 .board-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.icnx26 .board-count { font-size: .88rem; color: var(--ink-2); }
.icnx26 .board-count strong { color: var(--magenta-b); }

.icnx26 .board-scroll { overflow-x: auto; }
.icnx26 .board-table { min-width: 560px; }
.icnx26 .board-table th, .icnx26 .board-table td { padding: 13px 14px; text-align: center; font-size: .9rem; }
.icnx26 .board-table thead th {
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-3);
  border-bottom: 1px solid var(--line-2); background: rgba(255,255,255,.02);
}
.icnx26 .board-table tbody tr { border-bottom: 1px solid var(--line); transition: background-color .2s var(--ease); }
.icnx26 .board-table tbody tr:hover { background: rgba(255,255,255,.035); }
.icnx26 .board-table .col-title { text-align: left; font-weight: 600; }
.icnx26 .board-table .col-title a:hover { color: var(--magenta-b); }
.icnx26 .board-table .col-num, .icnx26 .board-table .col-date, .icnx26 .board-table .col-views { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.icnx26 .pin-tag {
  font-size: .7rem; font-weight: 800; padding: 2px 8px; border-radius: 5px; margin-right: 8px;
  color: #17032c; background: var(--magenta);
}

.icnx26 .board-state { padding: clamp(44px, 7vw, 80px) 24px; text-align: center; }
.icnx26 .board-state-icon {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 14px;
  border: 1px dashed var(--line-2); display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
}
.icnx26 .board-state h2, .icnx26 .board-state h3 { font-size: 1.05rem; font-weight: 700; }
.icnx26 .board-state p { margin-top: 8px; font-size: .9rem; color: var(--ink-3); }

.icnx26 .board-search { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 18px; border-top: 1px solid var(--line); }
.icnx26 .board-search select, .icnx26 .board-search input {
  padding: 10px 14px; border-radius: 9px; font-size: .9rem;
  color: var(--ink); background: rgba(255,255,255,.04); border: 1px solid var(--line-2);
}
.icnx26 .board-search select { min-width: 104px; }
.icnx26 .board-search input { flex: 1 1 220px; min-width: 0; }
.icnx26 .board-search input::placeholder { color: var(--ink-3); }
.icnx26 .board-search button {
  padding: 10px 22px; border-radius: 9px; font-size: .9rem; font-weight: 700;
  color: #17032c; background: linear-gradient(102deg, var(--magenta), var(--violet));
}

.icnx26 .pager { display: flex; justify-content: center; gap: 6px; padding: 20px; flex-wrap: wrap; }
.icnx26 .pager a, .icnx26 .pager span {
  min-width: 38px; height: 38px; padding: 0 11px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .88rem; font-weight: 600; border: 1px solid var(--line);
  color: var(--ink-2); transition: border-color .2s var(--ease), color .2s var(--ease);
}
.icnx26 .pager a:hover { border-color: var(--magenta); color: var(--ink); }
.icnx26 .pager [aria-current="page"] { color: #17032c; background: linear-gradient(102deg, var(--magenta), var(--violet)); border-color: transparent; }

/* --- notice detail ------------------------------------------------------- */
.icnx26 .notice-detail { border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--panel-2); overflow: hidden; }
.icnx26 .notice-detail-head { padding: clamp(22px,3vw,32px); border-bottom: 1px solid var(--line); }
.icnx26 .notice-detail-head h1 { font-size: clamp(1.25rem,2.6vw,1.7rem); font-weight: 800; line-height: 1.35; }
.icnx26 .notice-detail-meta { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .86rem; color: var(--ink-3); }
.icnx26 .notice-detail-body { padding: clamp(22px,3vw,32px); font-size: .97rem; color: var(--ink-2); line-height: 1.85; white-space: pre-wrap; word-break: break-word; }
.icnx26 .notice-detail-foot { padding: 18px; border-top: 1px solid var(--line); display: flex; justify-content: center; }

/* ==========================================================================
   Contact
   ========================================================================== */
.icnx26 .map-frame {
  border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--line-2);
  background: var(--navy-800); height: clamp(300px, 42vw, 460px);
}
.icnx26 .map-frame .root_daum_roughmap { width: 100% !important; height: 100% !important; }
.icnx26 .map-frame .root_daum_roughmap .wrap_map { height: 100% !important; }

.icnx26 .map-links { display: grid; gap: 12px; margin-top: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .icnx26 .map-links { grid-template-columns: repeat(3, 1fr); } }
.icnx26 .map-link {
  display: flex; align-items: center; gap: 12px; padding: 13px 18px;
  border-radius: var(--radius); border: 1px solid var(--line-2); background: rgba(255,255,255,.03);
  font-weight: 700; font-size: .93rem;
  transition: border-color .22s var(--ease), transform .22s var(--ease), background-color .22s var(--ease);
}
.icnx26 .map-link:hover { border-color: var(--magenta); transform: translateY(-2px); background: rgba(224,124,203,.08); }
.icnx26 .map-link img { width: 26px; height: 26px; flex-shrink: 0; }

.icnx26 .transit { display: grid; gap: 18px; margin-top: clamp(30px, 4vw, 48px); grid-template-columns: 1fr; }
@media (min-width: 800px) { .icnx26 .transit { grid-template-columns: repeat(3, 1fr); } }
.icnx26 .transit-col { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); padding: 20px; }
.icnx26 .transit-col h2, .icnx26 .transit-col h3 { font-size: .96rem; font-weight: 800; margin-bottom: 14px; color: var(--lavender); }
.icnx26 .transit-item + .transit-item { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.icnx26 .transit-item p { font-size: .88rem; font-weight: 600; }
.icnx26 .transit-item .lines { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.icnx26 .line-chip { font-size: .76rem; font-weight: 700; padding: 3px 10px; border-radius: 6px; color: #f7f2ff; }
.icnx26 .line-chip.blue   { background: #2a5fd4; }
.icnx26 .line-chip.red    { background: #b8392f; }
.icnx26 .line-chip.green  { background: #1f7a4d; }
.icnx26 .line-chip.violet { background: #6b46c1; }
.icnx26 .transit-note { margin-top: 8px; font-size: .85rem; color: var(--ink-2); }


/* ==========================================================================
   Footer
   ========================================================================== */
.icnx26 .site-footer { border-top: 1px solid var(--line); background: rgba(3,4,31,.85); padding-block: clamp(38px, 5vw, 60px); }
.icnx26 .footer-top { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .icnx26 .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.icnx26 .footer-brand img { height: 18px; margin-bottom: 14px; opacity: .9; }
.icnx26 .footer-brand p { font-size: .88rem; color: var(--ink-3); }
.icnx26 .footer-col h2, .icnx26 .footer-col h4 { font-size: .88rem; font-weight: 800; margin-bottom: 12px; }
.icnx26 .footer-col p, .icnx26 .footer-col a { font-size: .88rem; color: var(--ink-3); }
.icnx26 .footer-col a:hover { color: var(--magenta-b); }
.icnx26 .footer-contact-group { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; }
.icnx26 .footer-contact-group > a { min-width: 0; overflow-wrap: anywhere; }
.icnx26 .footer-contact-label { font-size: .88rem; color: var(--ink-3); white-space: nowrap; }
.icnx26 .footer-social { display: flex; gap: 10px; }
.icnx26 .footer-social a {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); color: var(--ink-2);
  transition: border-color .22s var(--ease), color .22s var(--ease), background-color .22s var(--ease);
}
.icnx26 .footer-social a:hover { border-color: var(--magenta); color: var(--magenta-b); background: rgba(224,124,203,.09); }
.icnx26 .footer-bottom {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
}
.icnx26 .footer-bottom p { font-size: .85rem; color: var(--ink-3); }

/* ==========================================================================
   Modal
   ========================================================================== */
.icnx26 .modal {
  position: fixed; inset: 0; z-index: 120; display: none;
  align-items: center; justify-content: center; padding: 18px;
}
.icnx26 .modal[data-open="true"] { display: flex; }
.icnx26 .modal-backdrop { position: absolute; inset: 0; background: rgba(3,4,31,.82); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.icnx26 .modal-panel {
  position: relative; width: min(660px, 100%); max-height: min(86dvh, 820px);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--radius-l);
  background: linear-gradient(158deg, #191b52, #08072f);
  box-shadow: 0 32px 80px rgba(0,0,0,.62);
  animation: icnx26-pop .3s var(--ease);
}
@keyframes icnx26-pop { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.icnx26 .modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 20px 22px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.icnx26 .modal-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: var(--lavender); }
.icnx26 .modal-title { margin-top: 5px; font-size: 1.22rem; font-weight: 800; line-height: 1.35; }
.icnx26 .modal-close {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.icnx26 .modal-close:hover { border-color: var(--magenta); color: var(--magenta-b); }
.icnx26 .modal-body { padding: 22px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.icnx26 .modal-figure { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.icnx26 .modal-figure .card-photo { width: 96px; height: 96px; margin: 0; }
.icnx26 .modal-logo {
  height: 74px; max-width: 100%; flex: 0 0 auto;
  border-radius: 10px; background: #fff; padding: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.icnx26 .modal-logo img { max-height: 100%; width: auto; object-fit: contain; }
.icnx26 .modal-name { display: block; font-size: 1.2rem; font-weight: 800; }
.icnx26 .modal-org { display: block; margin-top: 3px; font-size: .9rem; color: var(--lavender); }
.icnx26 .modal-name-ko { font-size: .95rem; font-weight: 600; color: var(--ink-3); margin-left: 6px; }
.icnx26 .modal-section + .modal-section { margin-top: 18px; }
.icnx26 .modal-section h4 { font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.icnx26 .modal-section p { font-size: .93rem; color: var(--ink-2); line-height: 1.85; }
.icnx26 .modal-source { margin-top: 16px; font-size: .78rem; color: var(--ink-3); font-style: italic; }
.icnx26 .modal-foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; flex-shrink: 0; flex-wrap: wrap; }
.icnx26 body.modal-open, body.icnx26.modal-open { overflow: hidden; }

/* ==========================================================================
   Motion — subtle, scoped, and fully switchable off
   ========================================================================== */
.icnx26 [data-reveal] { opacity: 0; transform: translateY(18px); }
.icnx26.motion-on [data-reveal] { transition: opacity .68s var(--ease), transform .68s var(--ease); }
.icnx26 [data-reveal].is-visible { opacity: 1; transform: none; }
/* Without JS (or before the observer runs) nothing may stay invisible. */
.icnx26.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .icnx26 *, .icnx26 *::before, .icnx26 *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .icnx26 [data-reveal] { opacity: 1 !important; transform: none !important; }
  .icnx26 .btn:hover, .icnx26 .card:hover, .icnx26 .rt-seat:hover, .icnx26 .map-link:hover { transform: none !important; }
}

@media print {
  .icnx26 .site-header, .icnx26 .glow-field, .icnx26 .modal { display: none !important; }
  .icnx26 { background: #fff; color: #000; }
}

/* 0908 일정표 날짜와 종료시각이 명시되지 않은 11/5 투어. */
.icnx26 .tt-date { margin: 0; padding: 14px 16px; color: #fff; background: var(--tt-day); font-size: 1rem; }
.icnx26 .tour-schedule { margin-top: 20px; }