/* ══════════════════════════════════════════════════════════
   지윤이앤씨 IT LAB — 제품 판매 사이트 테마
   style.css 이후에 로드됩니다. (헤더 / 푸터 / 메인 전용)
   기존 페이지 스타일을 건드리지 않도록 tk- 프리픽스를 사용하고,
   components.js 가 요구하는 클래스(nav-item / nav-link /
   nav-arrow / dropdown / nav-overlay)만 덮어씁니다.
   ══════════════════════════════════════════════════════════ */

/* hidden 속성은 브라우저 기본 스타일(display:none)로만 걸려 있어서
   .tk-btn 같은 작성자 스타일의 display 에 밀린다. 관리자 전용 버튼처럼
   숨어 있어야 할 요소가 그대로 보이므로 숨김이 항상 이기게 못박는다. */
[hidden] { display: none !important; }

:root {
    --tk-ink:        #0A0F1C;
    --tk-ink-2:      #121A2B;
    --tk-ink-3:      #1D2739;
    --tk-text:       #162032;
    --tk-muted:      #6A748A;
    --tk-line:       #E6E9F0;
    --tk-surface:    #FFFFFF;
    --tk-surface-2:  #F6F8FB;

    --tk-accent:     #72B830;
    --tk-accent-d:   #589421;
    --tk-accent-l:   #93D64F;
    --tk-accent-pale:#F1FAE7;
    --tk-cyan:       #17C8CE;

    --tk-radius:     16px;
    --tk-radius-lg:  24px;
    --tk-shadow:     0 1px 2px rgba(16,24,40,.04), 0 8px 24px -8px rgba(16,24,40,.10);
    --tk-shadow-lg:  0 24px 56px -16px rgba(10,15,28,.28), 0 4px 14px rgba(10,15,28,.06);
    --tk-head:       -0.03em;
}

.tk-wrap {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── 공통 버튼 ── */
.tk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s, background .18s, color .18s, border-color .18s;
}
.tk-btn svg { width: 17px; height: 17px; }
.tk-btn-primary {
    background: var(--tk-accent);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(114,184,48,.9);
}
.tk-btn-primary:hover { background: var(--tk-accent-d); transform: translateY(-2px); }
.tk-btn-ghost {
    background: transparent;
    color: var(--tk-text);
    border-color: var(--tk-line);
}
.tk-btn-ghost:hover { border-color: var(--tk-text); transform: translateY(-2px); }
.tk-btn-light {
    background: rgba(255,255,255,.08);
    color: #fff;
    border-color: rgba(255,255,255,.22);
}
.tk-btn-light:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.tk-btn-sm { height: 42px; padding: 0 20px; font-size: 14px; }

/* ══════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════ */
#header-placeholder { position: sticky; top: 0; z-index: 999; }

.tk-pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--tk-accent-l);
    box-shadow: 0 0 0 0 rgba(147,214,79,.7);
    animation: tk-pulse 2.4s infinite;
}
@keyframes tk-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(147,214,79,.6); }
    70%  { box-shadow: 0 0 0 7px rgba(147,214,79,0); }
    100% { box-shadow: 0 0 0 0 rgba(147,214,79,0); }
}
.tk-header {
    position: relative;
    background: rgba(255,255,255,.88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--tk-line);
    transition: box-shadow .3s, background-color .25s;
}
.tk-header.scrolled { box-shadow: 0 6px 24px -10px rgba(10,15,28,.22); }
/* 드롭다운(흰색 불투명)이 열릴 때 반투명 헤더와 색이 어긋나므로,
   헤더에 마우스가 올라가 있는 동안은 불투명 흰색으로 되돌린다. */
@media (hover: hover) {
    .tk-header:hover { background: #fff; }
}
.tk-header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 74px;
}

.tk-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tk-logo img { height: 38px; width: auto; object-fit: contain; }

/* ── 데스크탑 내비 ── */
.tk-nav {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: auto;
}
.tk-header .nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.tk-header .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 16px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--tk-text);
    border-bottom: none;
    white-space: nowrap;
    transition: color .2s;
}
.tk-header .nav-link::after {
    content: '';
    position: absolute;
    left: 16px; right: 16px;
    bottom: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--tk-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .24s cubic-bezier(.4,0,.2,1);
}
.tk-header .nav-link:hover,
.tk-header .nav-link.active { color: var(--tk-accent-d); background: none; }
.tk-header .nav-link:hover::after,
.tk-header .nav-link.active::after { transform: scaleX(1); }
.tk-header .nav-arrow { display: none; }

/* 햄버거로 바뀌기 직전(769~900px) 구간은 메뉴 5개 + 로고 + CTA가 빠듯하다.
   글자 크기는 유지하고 좌우 여백만 줄여 넘치지 않게 한다.
   ::after(밑줄) 위치도 패딩과 같이 맞춰야 밑줄이 글자 폭에 붙는다. */
@media (min-width: 769px) and (max-width: 900px) {
    .tk-header .nav-link { padding: 0 10px; }
    .tk-header .nav-link::after { left: 10px; right: 10px; }
}

.tk-header-cta { margin-left: 14px; flex-shrink: 0; font-size: 15px; }
.tk-nav-cta { display: none; }

/* ── 드롭다운 : 배경 띠는 헤더 폭 전체, 목록은 해당 메뉴 글자 아래 ──
   패널은 헤더 전체를 덮고(position:static + left/right:0), 목록의 가로 위치는
   components.js가 padding-left로 맞춘다 (메뉴 항목의 offsetLeft 기준). */
.tk-header .nav-item { position: static; }
.tk-header .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    padding: 14px 0 18px;   /* padding-left는 JS가 지정 */
    transform: translateY(-6px);
    background: #fff;
    border: none;
    border-bottom: 1px solid var(--tk-line);
    border-radius: 0;
    box-shadow: 0 22px 34px -22px rgba(10,15,28,.32);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 100;
}
.tk-header .dropdown::before { display: none; }
.tk-header .nav-item:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.tk-header .dropdown a {
    display: block;
    width: max-content;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: var(--tk-text);
    background: none;
    transition: background .16s, color .16s;
}
.tk-header .dropdown a:hover {
    background: var(--tk-surface-2);
    color: var(--tk-accent-d);
    transform: none;
}

.tk-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px; height: 42px;
    padding: 0 9px;
    background: none;
    border: none;
    cursor: pointer;
}
.tk-toggle span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--tk-text);
    transition: transform .25s, opacity .25s;
}

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
.tk-footer {
    width: 100%;
    margin: 0;
    border-radius: 0;
    background: var(--tk-ink);
    color: rgba(255,255,255,.62);
    overflow: visible;
}
.tk-footer-main { padding: 30px 0 10px; }
.tk-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr 1fr;
    gap: 32px;
}
.tk-footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.tk-footer-logo img { height: 36px; width: auto; object-fit: contain; }
.tk-footer-brand address {
    font-style: normal;
    font-size: 13.5px;
    line-height: 2;
    color: rgba(255,255,255,.55);
}
.tk-footer-brand address b { color: rgba(255,255,255,.85); font-weight: 600; }
.tk-footer-col h5 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    margin-bottom: 16px;
}
.tk-footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.tk-footer-col a {
    font-size: 13.5px;
    color: rgba(255,255,255,.55);
    transition: color .2s, padding-left .2s;
}
.tk-footer-col a:hover { color: var(--tk-accent-l); padding-left: 3px; }

/* 저작권 표기 — 푸터 맨 아래 전체폭 바에 가운데 정렬 */
.tk-footer-bottom { padding: 0 0 26px; }
.tk-footer-copy {
    font-size: 12.5px;
    color: rgba(255,255,255,.4);
    text-align: center;
}

/* 맨 위로 */
.scroll-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 46px; height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 14px;
    background: var(--tk-ink);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    box-shadow: var(--tk-shadow-lg);
    transition: all .25s;
    z-index: 900;
}
.scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--tk-accent); transform: translateY(-3px); }
.scroll-top svg { width: 20px; height: 20px; }

/* ══════════════════════════════════════════
   MAIN — 섹션 공통
   ══════════════════════════════════════════ */
.tk-main { background: #fff; }
.tk-section { padding: 96px 0; }
.tk-section-alt { background: var(--tk-surface-2); }

.tk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 13px;
    border-radius: 999px;
    background: var(--tk-accent-pale);
    color: var(--tk-accent-d);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.tk-head { max-width: 720px; margin-bottom: 48px; }
.tk-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.tk-head h2 {
    margin-top: 18px;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: var(--tk-head);
    color: var(--tk-text);
}
.tk-head h2 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--tk-accent-d), var(--tk-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tk-head p {
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.75;
    color: var(--tk-muted);
}

/* ══════════════════════════════════════════
   HERO
   ══════════════════════════════════════════ */
/* ══ 배경색 있는 블록의 가로 상한 (전 페이지 공통) ══
   화면이 넓어져도 배경 띠가 무한정 늘어나지 않게 막는다.
   FHD(1920px) 전체화면에서 좌우 285px씩 여백이 남는다.
   흰 배경 섹션은 tk-main과 같은 색이라 대상이 아니다. */
.tk-hero,
.tk-page-hero,
.tk-section-alt,
.tk-story,
.tk-cta,
.tk-footer,
.page-banner {
    max-width: 1350px;
    margin-left: auto;
    margin-right: auto;
}
/* 라운드는 여백이 실제로 생기는 폭에서만. 꽉 찬 상태에서 둥글리면
   화면 가장자리가 잘린 것처럼 보인다.
   회색 섹션(tk-section-alt)과 푸터는 각진 채로 둔다. */
@media (min-width: 1351px) {
    .tk-hero,
    .tk-page-hero,
    .tk-story,
    .page-banner { border-radius: var(--tk-radius-lg); }
    /* 각 페이지 첫 블록은 헤더에 붙지 않게 살짝 띄운다.
       좌우 여백·라운드가 생기는 폭에서만 — 꽉 찬 상태에서 띄우면
       헤더 아래 흰 줄이 생겨 어긋나 보인다. */
    .tk-hero,
    .tk-page-hero,
    .page-banner { margin-top: 16px; }
}

.tk-hero {
    position: relative;
    background: var(--tk-ink);
    overflow: hidden;
    isolation: isolate;
}
.tk-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
    z-index: -1;
}
.tk-hero .tk-wrap {
    position: relative;
    display: grid;
    /* 왼쪽 칼럼이 좁으면 히어로 설명이 3줄로 넘어간다.
       .tk-wrap이 1240px에서 멈추므로 화면을 넓혀도 해결되지 않는다.
       비율을 키워 왼쪽을 594px → 634px로 확보. */
    grid-template-columns: 1.12fr .88fr;
    align-items: center;
    gap: 60px;
    padding-top: 92px;
    padding-bottom: 92px;
}
.tk-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 15px 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.82);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.tk-hero h1 {
    margin-top: 26px;
    font-size: 58px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.04em;
    color: #fff;
}
.tk-hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--tk-accent-l), var(--tk-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tk-hero-desc {
    margin-top: 22px;
    font-size: 18px;
    line-height: 1.75;
    color: rgba(255,255,255,.66);
}
.tk-hero-btns { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

/* ── 히어로 슬라이더 ──
   슬라이드를 같은 격자 칸에 겹쳐 두고 opacity로 교차한다.
   칸 높이가 가장 긴 슬라이드에 맞춰지므로 넘어갈 때 히어로 높이가 흔들리지 않는다. */
.tk-hero-slides { display: grid; }
.tk-hero-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility .6s;
}
.tk-hero-slide.active { opacity: 1; visibility: visible; }
/* 초록 글로우는 목업 뒤에 따라붙인다. 히어로에 고정해 두면 목업이 좌우로
   번갈아 놓이는 탓에 어떤 장은 목업 뒤, 어떤 장은 문구 뒤가 되어 성격이 바뀐다.
   슬라이드 안에 두면 슬라이드와 같이 크로스페이드돼 전환 중에도 튀지 않는다. */
.tk-hero-slide::after {
    content: '';
    position: absolute;
    top: -26%; left: 52%;
    width: 780px; height: 780px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(114,184,48,.34) 0%, rgba(23,200,206,.14) 42%, transparent 68%);
    filter: blur(30px);
    pointer-events: none;
    z-index: -1;
}
.tk-hero-slide:nth-child(even)::after { left: auto; right: 52%; }
/* 짝수 번째 슬라이드는 목업을 왼쪽으로 보내 좌우를 번갈아 놓는다.
   넓은 칼럼은 문구 쪽에 그대로 두고, 기울기도 반대로 돌려 화면 안쪽을 향하게 한다. */
.tk-hero-slide:nth-child(even) { grid-template-columns: .88fr 1.12fr; }
.tk-hero-slide:nth-child(even) .tk-mock {
    order: -1;
    transform: perspective(1400px) rotateY(7deg) rotateX(2deg);
}
.tk-hero-dots {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 9px;
    padding-bottom: 36px;
}
.tk-hero-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.26);
    cursor: pointer;
    transition: width .25s, background .25s;
}
.tk-hero-dots button.active { width: 28px; background: var(--tk-accent-l); }
.tk-hero-stats {
    display: flex;
    gap: 40px;
    margin-top: 52px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,.1);
    flex-wrap: wrap;
}
.tk-hero-stats div strong {
    display: block;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
}
.tk-hero-stats div span { font-size: 13.5px; color: rgba(255,255,255,.5); }

/* 히어로 우측 앱 목업 */
.tk-mock {
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.13);
    box-shadow: 0 40px 80px -24px rgba(0,0,0,.6);
    overflow: hidden;
    transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
}
.tk-mock-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 16px;
    background: rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.tk-mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.2); }
.tk-mock-bar span {
    margin-left: 8px;
    font-size: 12px;
    color: rgba(255,255,255,.45);
    letter-spacing: .02em;
}
.tk-mock img { width: 100%; height: 330px; object-fit: cover; display: block; }
.tk-mock.shot img { height: auto; }
.tk-mock-foot {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(255,255,255,.04);
    border-top: 1px solid rgba(255,255,255,.1);
}
.tk-mock-foot b {
    flex: 1;
    padding: 9px 12px;
    border-radius: 9px;
    background: rgba(255,255,255,.06);
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255,255,255,.55);
    text-align: center;
}
.tk-mock-foot b.on { background: rgba(114,184,48,.22); color: var(--tk-accent-l); }

/* ══════════════════════════════════════════
   제품 라인업
   ══════════════════════════════════════════ */
.tk-lineup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
/* SW·HW 제품 페이지는 카드가 2개다.
   인라인 style 로 주면 아래 반응형 규칙을 이겨 모바일에서도 2열로 남으므로
   클래스로 둔다. (1080px 이하 규칙과 겹치지만 선택자가 더 구체적이라 이긴다) */
.tk-lineup-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) { .tk-lineup-grid.two { grid-template-columns: 1fr; } }
.tk-product {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius-lg);
    overflow: hidden;
    transition: transform .28s, box-shadow .28s, border-color .28s;
}
.tk-product:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: var(--tk-shadow-lg);
}
/* 높이를 고정하면 카드 폭(3열/2열)에 따라 비율이 달라진다.
   제품 화면 캡처(overview*.webp)와 같은 16:9 로 맞춘다. */
.tk-product-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--tk-ink-2) center/cover no-repeat;
}
/* .split — 두 화면을 대각선으로 겹쳐 보여주는 썸네일.
   바탕(background-image)이 좌측, --thumb-b 가 우측에 나온다.
   / 방향으로 아래 1/3 · 위 2/3 을 지나 양쪽 모두 사다리꼴이 된다. */
.tk-product-thumb.split::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--thumb-b);
    background-size: cover;
    background-position: center;
    clip-path: polygon(66.67% 0, 100% 0, 100% 100%, 33.33% 100%);
    transition: clip-path .32s cubic-bezier(.4,0,.2,1);
}
/* 마우스가 들어온 쪽 화면을 전체로 펼친다.
   어느 쪽인지는 components.js 가 들어오는 순간 한 번만 판정한다. */
.tk-product-thumb.split.show-a::before {   /* 좌측(바탕) 화면만 보이게 — 위를 걷어낸다 */
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.tk-product-thumb.split.show-b::before {   /* 우측 화면을 전체로 */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
/* 경계선 — clip-path 에는 border 가 안 먹으므로 같은 각도의 얇은 띠를 덧그린다.
   두 화면 다 배경이 흰색이라 어두운 색을 쓴다. */
.tk-product-thumb.split::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10,15,28,.7);
    /* 가로 1.2px → 대각선이 기울어 있어 실제 보이는 굵기는 약 1px */
    clip-path: polygon(
        66.67% 0, calc(66.67% + 1.2px) 0,
        calc(33.33% + 1.2px) 100%, 33.33% 100%
    );
    transition: opacity .22s ease;
}
/* 한쪽이 펼쳐져 있으면 경계선은 의미가 없다 */
.tk-product-thumb.split.show-a::after,
.tk-product-thumb.split.show-b::after { opacity: 0; }
.tk-chip {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 11px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    background: rgba(255,255,255,.94);
    color: var(--tk-text);
}
.tk-chip-hw { background: var(--tk-ink); color: #fff; }
.tk-product-body { display: flex; flex-direction: column; flex: 1; padding: 26px 24px 24px; }
.tk-product-body h3 {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--tk-text);
}
.tk-product-body > p {
    margin-top: 11px;
    font-size: 14.5px;
    line-height: 1.72;
    color: var(--tk-muted);
}
.tk-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.tk-tags span {
    padding: 6px 11px;
    border-radius: 7px;
    background: var(--tk-surface-2);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tk-muted);
}
.tk-product-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 22px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tk-accent-d);
    transition: gap .2s;
}
.tk-product:hover .tk-product-more { gap: 11px; }

/* ══════════════════════════════════════════
   강점
   ══════════════════════════════════════════ */
.tk-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
.tk-feature {
    padding: 32px 26px;
    background: #fff;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    transition: transform .25s, box-shadow .25s;
}
.tk-feature:hover { transform: translateY(-4px); box-shadow: var(--tk-shadow); }
.tk-feature-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    margin-bottom: 20px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--tk-accent) 0%, var(--tk-accent-d) 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
}
.tk-feature-ico svg { width: 22px; height: 22px; }
.tk-feature h4 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tk-text);
}
.tk-feature p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--tk-muted);
}

/* ══════════════════════════════════════════
   개발 스토리
   ══════════════════════════════════════════ */
.tk-story { background: var(--tk-ink); color: #fff; }
.tk-story .tk-head h2 { color: #fff; }
.tk-story .tk-head p { color: rgba(255,255,255,.6); }
.tk-story .tk-eyebrow { background: rgba(114,184,48,.16); color: var(--tk-accent-l); }
.tk-story-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 64px;
    align-items: start;
}
.tk-steps { display: flex; flex-direction: column; }
.tk-step {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 20px;
    padding-bottom: 34px;
}
.tk-step:last-child { padding-bottom: 0; }
.tk-step::before {
    content: '';
    position: absolute;
    left: 21px; top: 46px; bottom: 0;
    width: 1px;
    background: rgba(255,255,255,.13);
}
.tk-step:last-child::before { display: none; }
.tk-step-no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 13px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    font-size: 14px;
    font-weight: 800;
    color: var(--tk-accent-l);
}
.tk-step h4 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    padding-top: 9px;
}
.tk-step p {
    margin-top: 9px;
    font-size: 14.5px;
    line-height: 1.75;
    color: rgba(255,255,255,.55);
}

/* 헤드를 전폭으로 올리고 단계를 2열로 나누는 변형.
   앞 절반이 왼쪽, 뒤 절반이 오른쪽으로 가도록 행 수를 tk-rows-*로 지정한다. */
.tk-steps-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    column-gap: 56px;
}
/* 설명이 한 줄이든 두 줄이든 행 높이가 같도록 두 줄 분량을 확보한다 (14.5px x 1.75 x 2줄) */
.tk-steps-2col .tk-step p { min-height: 50.75px; }
/* 왼쪽 칸 마지막 단계는 아래로 이어지는 선과 여백을 없앤다 */
.tk-steps-2col.tk-rows-2 { grid-template-rows: auto auto; }
.tk-steps-2col.tk-rows-2 .tk-step:nth-child(2) { padding-bottom: 0; }
.tk-steps-2col.tk-rows-2 .tk-step:nth-child(2)::before { display: none; }
.tk-steps-2col.tk-rows-3 { grid-template-rows: auto auto auto; }
.tk-steps-2col.tk-rows-3 .tk-step:nth-child(3) { padding-bottom: 0; }
.tk-steps-2col.tk-rows-3 .tk-step:nth-child(3)::before { display: none; }

/* ══════════════════════════════════════════
   기술지원
   ══════════════════════════════════════════ */
.tk-support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
/* 기술지원 페이지와 메인 기술지원 영역은 항목이 4개다.
   아래 1024px 규칙보다 선택자가 구체적이라 좁은 화면에서도 이 값이 이긴다. */
.tk-support-grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .tk-support-grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tk-support-grid.four { grid-template-columns: 1fr; } }
.tk-support-card {
    display: flex;
    flex-direction: column;
    padding: 34px 30px;
    background: #fff;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius-lg);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.tk-support-card:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: var(--tk-shadow-lg);
}
.tk-support-card .tk-feature-ico {
    background: var(--tk-accent-pale);
    color: var(--tk-accent-d);
}
.tk-support-card h4 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tk-text);
}
.tk-support-card p {
    margin-top: 11px;
    font-size: 14.5px;
    line-height: 1.72;
    color: var(--tk-muted);
}
.tk-support-card span {
    margin-top: 22px;
    font-size: 14px;
    font-weight: 700;
    color: var(--tk-accent-d);
}

/* ══════════════════════════════════════════
   NEWS
   ══════════════════════════════════════════ */
/* NEWS 섹션은 위쪽 여백을 절반으로 (tk-section 기본 96px → 48px) */
.tk-news { padding-top: 48px; }
/* 제목은 다른 섹션처럼 가운데(tk-head center), 전체보기는 원래대로 오른쪽 끝.
   flex로 나란히 두면 제목이 링크 폭만큼 밀려 중앙이 어긋나므로 링크만 띄운다. */
.tk-news-head {
    position: relative;
    margin-bottom: 40px;
}
.tk-news-head .tk-head { margin-bottom: 0; }
.tk-news-head .tk-view-all {
    position: absolute;
    right: 0;
    bottom: 4px;
}
.tk-view-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 700;
    color: var(--tk-text);
    transition: gap .2s, color .2s;
}
.tk-view-all:hover { gap: 12px; color: var(--tk-accent-d); }

.tk-news #notice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.tk-news .news-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 28px 26px;
    background: #fff;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.tk-news .news-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--tk-shadow-lg);
}
.tk-news .news-card-top { display: flex; align-items: center; gap: 10px; }
.tk-news .news-type {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 7px;
    background: var(--tk-accent-pale);
    color: var(--tk-accent-d);
    font-size: 12px;
    font-weight: 700;
}
.tk-news .news-date { font-size: 12.5px; color: var(--tk-muted); }
.tk-news .news-body h4 {
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -0.02em;
    color: var(--tk-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tk-news-empty { padding: 28px 0; color: var(--tk-muted); font-size: 15px; }

/* ══════════════════════════════════════════
   서브 페이지 — 배너 / 브레드크럼
   ══════════════════════════════════════════ */
.tk-page-hero {
    position: relative;
    background: var(--tk-ink);
    overflow: hidden;
    isolation: isolate;
}
.tk-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000 20%, transparent 80%);
    z-index: -1;
}
.tk-page-hero::after {
    content: '';
    position: absolute;
    top: -60%; left: 62%;
    width: 620px; height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(114,184,48,.3) 0%, rgba(23,200,206,.1) 45%, transparent 70%);
    filter: blur(30px);
    z-index: -1;
}
.tk-page-hero .tk-wrap { padding-top: 74px; padding-bottom: 74px; }
.tk-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255,255,255,.45);
}
.tk-crumb a { color: rgba(255,255,255,.45); transition: color .2s; }
.tk-crumb a:hover { color: #fff; }
.tk-crumb span.sep { opacity: .5; }
.tk-crumb b { color: var(--tk-accent-l); font-weight: 600; }
.tk-page-hero h1 {
    margin-top: 18px;
    font-size: 46px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.035em;
    color: #fff;
}
.tk-page-hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--tk-accent-l), var(--tk-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.tk-page-hero > .tk-wrap > p {
    max-width: 680px;
    margin-top: 18px;
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255,255,255,.62);
}

/* ── 제품 상세 : 개요 ── */
.tk-detail-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 60px;
    align-items: center;
}
/* 좌우가 대등한 두 칼럼 (Step 03 처럼 양쪽에 같은 무게의 내용이 올 때) */
.tk-detail-grid.even { grid-template-columns: 1fr 1fr; }

/* 아직 실물이 없는 화면. 무엇을 보고 있는지 그림 위에 밝힌다. */
.tk-shot-wip { position: relative; }
.tk-shot-wip::after {
    content: attr(data-note);
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 9px 12px;
    background: rgba(0,0,0,.74);
    color: rgba(255,255,255,.92);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
}
.tk-wip-tag {
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--tk-surface-2);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--tk-muted);
    vertical-align: 2px;
}

.tk-detail-visual {
    border-radius: var(--tk-radius-lg);
    overflow: hidden;
    border: 1px solid var(--tk-line);
    box-shadow: var(--tk-shadow-lg);
}
.tk-detail-visual img { width: 100%; height: 380px; object-fit: cover; display: block; }

/* 프로그램 화면 캡처는 사진과 달라서 잘리면 UI 가 날아간다.
   .shot 은 높이를 고정하지 않고 원본 비율 그대로 보여준다. */
.tk-detail-visual.shot img,
.tk-detail-visual.shot video { width: 100%; height: auto; display: block; }
.tk-detail-visual.shot.wide { max-width: 900px; margin-left: auto; margin-right: auto; }

/* 두 이미지 교차 표시 — 주기는 --tk-fade-cycle 한 곳에서 조절 */
.tk-visual-fade { position: relative; --tk-fade-cycle: 10s; }
.tk-visual-fade img + img {
    position: absolute;
    inset: 0;
    animation: tkVisualFade var(--tk-fade-cycle) ease-in-out infinite;
}
@keyframes tkVisualFade {
    0%, 42%  { opacity: 0; }
    50%, 92% { opacity: 1; }
    100%     { opacity: 0; }
}
/* 라벨은 글자가 겹치지 않도록 전환 중간에 짧게 끊어서 교체 */
@keyframes tkVisualTagOut {
    0%, 45%   { opacity: 1; }
    47%, 95%  { opacity: 0; }
    97%, 100% { opacity: 1; }
}
@keyframes tkVisualTagIn {
    0%, 45%   { opacity: 0; }
    47%, 95%  { opacity: 1; }
    97%, 100% { opacity: 0; }
}
.tk-visual-tag {
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(12, 18, 26, .62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    animation: tkVisualTagOut var(--tk-fade-cycle) ease-in-out infinite;
}
.tk-visual-tag + .tk-visual-tag { animation-name: tkVisualTagIn; }
.tk-detail-list { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.tk-detail-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--tk-text);
}
.tk-tick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    flex-shrink: 0;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--tk-accent-pale);
    color: var(--tk-accent-d);
}
.tk-tick svg { width: 13px; height: 13px; }

/* ── 사양 표 ── */
.tk-spec {
    width: 100%;
    border-top: 2px solid var(--tk-text);
    border-collapse: collapse;
}
.tk-spec th, .tk-spec td {
    padding: 17px 20px;
    border-bottom: 1px solid var(--tk-line);
    font-size: 15px;
    text-align: left;
    vertical-align: top;
}
.tk-spec th {
    width: 220px;
    background: var(--tk-surface-2);
    font-weight: 700;
    color: var(--tk-text);
}
.tk-spec td { color: var(--tk-muted); line-height: 1.7; }

/* ── 아코디언 (FAQ) ── */
.tk-acc { border-top: 1px solid var(--tk-line); }
.tk-acc details {
    border-bottom: 1px solid var(--tk-line);
}
.tk-acc summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 8px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--tk-text);
    cursor: pointer;
    list-style: none;
    transition: color .18s;
}
.tk-acc summary::-webkit-details-marker { display: none; }
.tk-acc summary:hover { color: var(--tk-accent-d); }
.tk-acc summary::before {
    content: 'Q';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    background: var(--tk-accent-pale);
    color: var(--tk-accent-d);
    font-size: 14px;
    font-weight: 800;
}
.tk-acc summary::after {
    content: '';
    width: 10px; height: 10px;
    margin-left: auto;
    flex-shrink: 0;
    border-right: 2px solid var(--tk-muted);
    border-bottom: 2px solid var(--tk-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .22s;
}
.tk-acc details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.tk-acc-body {
    padding: 0 8px 26px 54px;
    font-size: 15px;
    line-height: 1.85;
    color: var(--tk-muted);
}

/* ── 자료실 목록 ── */
.tk-files { display: flex; flex-direction: column; gap: 10px; }
.tk-file {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.tk-file:hover { border-color: transparent; box-shadow: var(--tk-shadow); transform: translateX(4px); }
.tk-file-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--tk-surface-2);
    color: var(--tk-accent-d);
}
.tk-file-ico svg { width: 20px; height: 20px; }
.tk-file-txt { flex: 1; min-width: 0; }
.tk-file-txt strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--tk-text);
}
.tk-file-txt span { font-size: 13px; color: var(--tk-muted); }
.tk-file-dl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--tk-accent-pale);
    color: var(--tk-accent-d);
    transition: background .2s, color .2s;
}
.tk-file:hover .tk-file-dl { background: var(--tk-accent); color: #fff; }
.tk-file-dl svg { width: 17px; height: 17px; }

/* ── 문의 폼 ── */
.tk-form-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 56px;
    align-items: start;
}
.tk-form { display: flex; flex-direction: column; gap: 18px; }
.tk-field { display: flex; flex-direction: column; gap: 8px; }
.tk-field label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tk-text);
}
.tk-field label i { font-style: normal; color: var(--tk-accent); }
.tk-field input,
.tk-field select,
.tk-field textarea {
    width: 100%;
    padding: 13px 16px;
    font-family: inherit;
    font-size: 15px;
    color: var(--tk-text);
    background: #fff;
    border: 1px solid var(--tk-line);
    border-radius: 11px;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
}
.tk-field textarea { min-height: 150px; resize: vertical; line-height: 1.7; }
.tk-field input:focus,
.tk-field select:focus,
.tk-field textarea:focus {
    border-color: var(--tk-accent);
    box-shadow: 0 0 0 3px rgba(114,184,48,.16);
}
.tk-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tk-form-note { font-size: 13px; line-height: 1.7; color: var(--tk-muted); }

.tk-contact-card {
    padding: 32px 30px;
    background: var(--tk-surface-2);
    border-radius: var(--tk-radius-lg);
}
.tk-contact-card h3 {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--tk-text);
}
.tk-contact-card > p { margin-top: 10px; font-size: 14.5px; line-height: 1.7; color: var(--tk-muted); }
.tk-contact-list { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.tk-contact-list li { display: flex; gap: 14px; }
.tk-contact-list .tk-file-ico { background: #fff; width: 40px; height: 40px; }
.tk-contact-list b {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--tk-muted);
}
.tk-contact-list span { font-size: 15px; color: var(--tk-text); line-height: 1.6; }

/* ── 타임라인 (개발 스토리) ── */
.tk-timeline { position: relative; padding-left: 34px; }
.tk-timeline::before {
    content: '';
    position: absolute;
    left: 7px; top: 8px; bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--tk-accent) 0%, var(--tk-line) 100%);
}
.tk-tl-item { position: relative; padding-bottom: 44px; }
.tk-tl-item:last-child { padding-bottom: 0; }
.tk-tl-item::before {
    content: '';
    position: absolute;
    left: -34px; top: 6px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--tk-accent);
}
.tk-tl-year {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 11px;
    border-radius: 7px;
    background: var(--tk-accent-pale);
    color: var(--tk-accent-d);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .03em;
}
.tk-tl-item h4 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--tk-text);
}
.tk-tl-item p {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--tk-muted);
}

/* ── 하단 CTA 밴드 ── */
/* CTA는 바로 아래 푸터가 어두운 색이라 같이 어두우면 한 덩어리로 보인다.
   밝은 브랜드 톤으로 두어 푸터와 분리하고 행동 유도 구간임을 드러낸다. */
.tk-cta {
    padding: 76px 0;
    background: var(--tk-accent-pale);
    text-align: center;
}
.tk-cta h2 {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: var(--tk-head);
    color: var(--tk-text);
}
.tk-cta p { margin-top: 14px; font-size: 16.5px; color: var(--tk-muted); }
.tk-cta-btns { display: flex; justify-content: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
/* tk-btn-light는 어두운 배경용(흰 글자)이라 여기선 보이지 않는다.
   페이지마다 클래스를 바꾸는 대신 CTA 안에서만 흰 버튼으로 재정의한다. */
.tk-cta .tk-btn-light {
    background: #fff;
    color: var(--tk-text);
    border-color: var(--tk-line);
}
.tk-cta .tk-btn-light:hover { background: #fff; border-color: var(--tk-text); }

/* ── 출시 예정 안내 ── */
.tk-soon {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.tk-soon-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--tk-accent-pale);
    color: var(--tk-accent-d);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.tk-soon h2 {
    margin-top: 24px;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: var(--tk-head);
    color: var(--tk-text);
}
.tk-soon p { margin-top: 16px; font-size: 16.5px; line-height: 1.8; color: var(--tk-muted); }
.tk-soon .tk-cta-btns { margin-top: 34px; }

/* ── 라인업 로드맵 (SW·HW 제품 페이지 공용) ── */
.tk-road { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tk-road-col {
    display: flex;
    flex-direction: column;
    padding: 30px 26px;
    background: #fff;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
}
/* 지금 공급 중인 단계만 강조한다 */
.tk-road-col.now { border-color: var(--tk-accent); box-shadow: var(--tk-shadow); }

.tk-road-phase {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--tk-muted);
}
.tk-road-phase::before {
    content: '';
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--tk-line);
}
.tk-road-col.now .tk-road-phase { color: var(--tk-accent-d); }
.tk-road-col.now .tk-road-phase::before { background: var(--tk-accent); }

/* 로드맵이 아니라 나란히 두고 비교하는 경우 — 한 칸만 강조하면 어긋나므로 세 칸을 같은 무게로 둔다 */
.tk-road-compare .tk-road-col { border-color: var(--tk-accent); box-shadow: var(--tk-shadow); }
.tk-road-compare .tk-road-phase { color: var(--tk-accent-d); }
.tk-road-compare .tk-road-phase::before { background: var(--tk-accent); }

.tk-road-col h4 {
    margin-top: 14px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--tk-text);
}
.tk-road-col > p { margin-top: 9px; font-size: 14px; line-height: 1.7; color: var(--tk-muted); }

.tk-road-list {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--tk-line);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tk-road-list li { display: flex; flex-direction: column; gap: 4px; }
.tk-road-list b { font-size: 15.5px; font-weight: 700; color: var(--tk-text); }
.tk-road-list span { font-size: 13.5px; line-height: 1.65; color: var(--tk-muted); }

@media (max-width: 1024px) { .tk-road { grid-template-columns: 1fr; } }

/* ── 목업 안내 배지 ── */
.tk-wip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 9px;
    background: #FFF7E6;
    border: 1px solid #FFE0A3;
    color: #8A5A00;
    font-size: 13px;
    font-weight: 600;
}

/* ══════════════════════════════════════════
   반응형
   ══════════════════════════════════════════ */
@media (max-width: 1080px) {
    .tk-hero .tk-wrap { grid-template-columns: 1fr; gap: 48px; }
    .tk-hero h1 { font-size: 46px; }
    .tk-mock { transform: none; }
    /* 한 칼럼으로 접히면 좌우 교차가 의미가 없다. 문구가 항상 위로 오게 되돌린다. */
    .tk-hero-slide:nth-child(even) { grid-template-columns: 1fr; }
    .tk-hero-slide:nth-child(even) .tk-mock { order: 0; transform: none; }
    .tk-lineup-grid { grid-template-columns: 1fr 1fr; }
    .tk-feature-grid { grid-template-columns: 1fr 1fr; }
    .tk-story-grid { grid-template-columns: 1fr; gap: 40px; }
    .tk-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px 26px; }
    .tk-support-grid { grid-template-columns: 1fr; }
    .tk-news #notice-grid { grid-template-columns: 1fr 1fr; }
    .tk-detail-grid, .tk-detail-grid.even { grid-template-columns: 1fr; gap: 40px; }
    .tk-form-grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 768px) {
    /* 좁은 화면에서는 2열이 답답하므로 한 줄로 되돌린다 */
    .tk-steps-2col { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
    .tk-steps-2col.tk-rows-2 .tk-step:nth-child(2),
    .tk-steps-2col.tk-rows-3 .tk-step:nth-child(3) { padding-bottom: 34px; }
    .tk-steps-2col.tk-rows-2 .tk-step:nth-child(2)::before,
    .tk-steps-2col.tk-rows-3 .tk-step:nth-child(3)::before { display: block; }
    /* 좁은 화면에서는 제목과 겹치므로 링크를 제목 아래 가운데로 내린다 */
    .tk-news-head .tk-view-all {
        position: static;
        display: flex;
        justify-content: center;
        margin-top: 18px;
    }

    .tk-section { padding: 64px 0; }
    .tk-head { margin-bottom: 34px; }
    .tk-head h2 { font-size: 30px; }
    .tk-head p { font-size: 15.5px; }

    /* 헤더 */
    .tk-header-inner { height: 64px; }
    .tk-logo img { height: 32px; }
    .tk-header-cta { display: none; }
    .tk-toggle { display: flex; margin-left: auto; }
    .tk-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .tk-toggle.open span:nth-child(2) { opacity: 0; }
    .tk-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .tk-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        height: auto;
        margin: 0;
        padding: 10px 12px 16px;
        background: #fff;
        border-bottom: 1px solid var(--tk-line);
        box-shadow: 0 16px 32px -12px rgba(10,15,28,.24);
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        z-index: 999;
    }
    .tk-nav.open { display: flex; }
    .tk-header .nav-item {
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid var(--tk-line);
    }
    .tk-header .nav-link {
        flex: 1;
        height: auto;
        padding: 16px 8px;
        font-size: 17px;
        font-weight: 700;
    }
    .tk-header .nav-link::after { display: none; }
    .tk-header .nav-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px; height: 42px;
        flex-shrink: 0;
        padding: 0;
        background: none;
        border: none;
        font-size: 22px;
        line-height: 1;
        color: var(--tk-muted);
        cursor: pointer;
        transition: transform .2s, color .2s;
    }
    .tk-header .nav-item.open > .nav-arrow { transform: rotate(90deg); color: var(--tk-accent-d); }
    .tk-header .nav-item .dropdown {
        display: none;
        position: static;
        flex-basis: 100%;
        width: auto;      /* 데스크탑의 width:max-content 해제 — 모바일은 전체 너비 */
        min-width: 0;
        transform: none;
        opacity: 1;
        visibility: visible;
        margin: 0 0 12px;
        padding: 6px;
        background: var(--tk-surface-2);
        border: none;
        border-radius: 12px;
        box-shadow: none;
        transition: none;
    }
    .tk-header .nav-item.open .dropdown { display: block; }
    .tk-header .nav-item:hover .dropdown { transform: none; }
    .tk-header .dropdown::before { display: none; }  /* 전체폭 배경 띠는 데스크탑 전용 */
    .tk-header .dropdown a { background: none; padding: 11px 10px; width: auto; white-space: normal; }
    .tk-header .dropdown a:hover { background: #fff; }
    .tk-nav-cta { display: block; padding: 16px 8px 4px; }
    .tk-nav-cta .tk-btn { width: 100%; }

    .nav-overlay {
        display: none;
        position: fixed;
        inset: 0;
        top: 64px;
        background: rgba(10,15,28,.42);
        z-index: 998;
    }
    .nav-overlay.show { display: block; }

    /* 히어로 */
    .tk-hero .tk-wrap { padding-top: 60px; padding-bottom: 60px; }
    .tk-hero h1 { font-size: 34px; margin-top: 20px; }
    .tk-hero-desc { font-size: 16px; }
    .tk-hero-btns .tk-btn { flex: 1; }
    .tk-hero-stats { gap: 28px; margin-top: 38px; }
    .tk-hero-stats div strong { font-size: 24px; }
    .tk-mock img { height: 220px; }

    /* 섹션 */
    .tk-lineup-grid,
    .tk-feature-grid,
    .tk-news #notice-grid { grid-template-columns: 1fr; }

    /* 푸터 */
    .tk-footer { margin: 0; }
    .tk-footer-main { padding: 46px 0 34px; }
    .tk-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
    .tk-footer-brand { grid-column: 1 / -1; }
    .scroll-top { right: 16px; bottom: 16px; }

    /* 서브 페이지 */
    .tk-page-hero .tk-wrap { padding-top: 48px; padding-bottom: 48px; }
    .tk-page-hero h1 { font-size: 30px; }
    .tk-page-hero > .tk-wrap > p { font-size: 15.5px; }
    .tk-detail-visual img { height: 240px; }
    .tk-spec th, .tk-spec td { display: block; width: auto; }
    .tk-spec th { border-bottom: none; padding-bottom: 8px; }
    .tk-field-row { grid-template-columns: 1fr; }
    .tk-cta { padding: 56px 0; }
    .tk-cta h2 { font-size: 25px; }
    .tk-cta-btns .tk-btn { flex: 1; }
}


/* ══════════════════════════════════════════
   NEWS 카드 — news.html 목록과 index.html 최신 소식이 함께 쓴다
   ══════════════════════════════════════════ */
.nw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.nw-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius-lg);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.nw-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--tk-shadow-lg);
}
.nw-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--tk-surface-2);
    overflow: hidden;
}
.nw-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s;
}
.nw-card:hover .nw-thumb img { transform: scale(1.045); }
.nw-badge {
    position: absolute;
    top: 13px; left: 13px;
    display: inline-flex;
    align-items: center;
    height: 25px;
    padding: 0 11px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    background: rgba(255,255,255,.94);
    color: var(--tk-text);
}
/* 구분 3종. 기본(흰 배지)은 전시·행사이고, 나머지 둘만 색을 준다. */
.nw-badge.notice { background: var(--tk-accent); color: #fff; }
.nw-badge.press  { background: var(--tk-text); color: #fff; }
.nw-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.nw-meta { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--tk-muted); }
.nw-meta b { font-weight: 700; color: var(--tk-accent-d); }
.nw-meta i { font-style: normal; color: var(--tk-line); }
.nw-title {
    margin-top: 11px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.025em;
    color: var(--tk-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.nw-card:hover .nw-title { color: var(--tk-accent-d); }
.nw-more {
    margin-top: auto;
    padding-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tk-accent-d);
}
.nw-msg { padding: 60px 24px; text-align: center; font-size: 15px; color: var(--tk-muted); }

@media (max-width: 1024px) { .nw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .nw-grid { grid-template-columns: 1fr; } }