/* Thermophene 공개 사이트 조합(접두사 tp-). 토큰과 키트 클래스만 쓴다.
   시그니처: 밝은 흰 바탕 · 로고의 육각형 · 청록에서 라임으로 흐르는 로고 그라데이션(--brand-word-1 → --brand-accent → --brand-word-2). */

:root{
  --tp-grad:linear-gradient(90deg,var(--brand-word-1) 0%,var(--brand-accent) 55%,color-mix(in oklab,var(--brand-word-2) 70%,var(--brand-accent)) 100%);
  --tp-grad-soft:linear-gradient(120deg,color-mix(in oklab,var(--brand-word-1) 10%,var(--surface)) 0%,color-mix(in oklab,var(--brand-accent) 9%,var(--surface)) 50%,color-mix(in oklab,var(--brand-word-2) 16%,var(--surface)) 100%);
  --tp-hex:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
}

/* 로고(내비·서랍·푸터) */
.site-logo{display:inline-flex;align-items:center}
.site-logo .logo__svg{height:var(--logo-h,24px);width:auto;display:block}
.site-lang{gap:var(--s-6)}
@media (max-width:1023px){.site-lang{padding-inline:var(--s-12)}.site-lang .ico{display:none}} /* 좁은 화면에서도 메뉴 버튼 옆에 언어 전환을 둔다 */

/* 그라데이션 글자 */
.tp-grad-text{background:var(--tp-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.tp-note{margin:var(--s-16) 0 0;color:var(--ink-subtle);font-size:var(--t-body-xs);line-height:var(--t-body-xs-lh)}
.tp-lit{margin:var(--s-24) 0 0;max-width:46rem;word-break:keep-all}

/* ══ 1. 첫 화면 ══ */
.tp-hero{isolation:isolate}
.tp-hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,var(--canvas) 0%,var(--canvas) 40%,transparent 92%);mask-image:linear-gradient(180deg,var(--canvas) 0%,var(--canvas) 40%,transparent 92%)}
.tp-hero__bg img{width:100%;height:100%;object-fit:cover}
@media (max-width:1023px){.tp-hero__bg{display:none}} /* 좁은 화면에서는 육각 무늬가 크게 번져 제목 뒤가 뿌옇게 보인다 */
.tp-hero__aurora{z-index:0;opacity:.7}
.tp-hero__main{flex:1;display:flex;flex-direction:column;justify-content:center;padding-block:var(--s-16) var(--s-40)}
@media (min-width:1024px){.tp-hero__main{padding-block:var(--s-40) var(--s-48)}}
.tp-hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-40);align-items:center}
@media (min-width:1024px){.tp-hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s-64)}}
.tp-hero .hero-ed__kicker{color:var(--accent-text)}
.tp-hero .hero-ed__kicker .brand-mark{--mark-h:22px}
.tp-hero h1{text-wrap:balance}
.tp-hero h1 .mline__in{white-space:normal}
@media (min-width:1024px){.tp-hero__title{font-size:var(--t-display-xl);line-height:1.1}.tp-hero__title .mline__in{white-space:nowrap}}
@media (min-width:1440px){.tp-hero__title{font-size:var(--t-display-2xl)}}
.tp-hero__stage{position:relative;padding:var(--s-24) var(--s-16) var(--s-40)}
@media (min-width:1024px){.tp-hero__stage{padding:var(--s-32) var(--s-24) var(--s-48) var(--s-40)}}
.tp-hero__photo{position:relative;margin:0;aspect-ratio:4 / 3;border-radius:var(--r-3xl);overflow:hidden;
  box-shadow:var(--sh-xl);background:var(--surface)}
.tp-hero__photo img{width:100%;height:100%;object-fit:cover;object-position:72% 55%;animation:tp-photo-in calc(var(--d-7) * 3) var(--ease-out) both}
/* 공정 3D 자리(pages/_process): 장면이 붙어 있고 단계가 지나간다. 좁은 화면은 위에 붙고(단계 글이 그 아래로 지나감), 넓은 화면은 왼쪽 칸에 붙는다 */
.tp-proc{--tp-proc-top:var(--nav-h)}
.tp-proc--under-subnav{--tp-proc-top:calc(var(--nav-h) + var(--s-40) + var(--s-4) + var(--s-16) + 1px)} /* 구역 이동 띠(44 + 위아래 8 + 선) 바로 아래. 지나가는 글이 틈으로 비치지 않게 */
.tp-proc__stage{position:sticky;top:var(--tp-proc-top);z-index:1;align-self:start;margin-inline:calc(var(--s-4) * -1);padding:var(--s-12) var(--s-4);background:var(--canvas-alt)}
.tp-proc3d{--ar:16 / 10;box-shadow:var(--sh-sm)}
.tp-proc3d .tp-proc3d__cap{top:var(--s-12);bottom:auto;left:var(--s-12)} /* 좁은 화면: 이름표는 위에(아래쪽 커피박 더미를 가리지 않게) */
@media (min-width:1024px){
  .tp-proc{--tp-proc-top:calc(var(--nav-h) + var(--s-48))}
  .tp-proc--under-subnav{--tp-proc-top:calc(var(--nav-h) + var(--s-40) + var(--s-4) + var(--s-16) + var(--s-40))}
  .tp-proc__stage{margin:0;padding:0;background:none}
  .tp-proc3d{--ar:1}
  .tp-proc3d .tp-proc3d__cap{top:auto;bottom:var(--s-16);left:var(--s-16)}
  .tp-proc__steps{padding-top:var(--s-200)} /* 장면이 다 보인 뒤에 1단계가 읽는 선에 오게 */
}
/* 공정 3D(process3d_controller): 연구 4단계 공정 머리 사진 자리. 그려지면 사진 대신 캔버스와 지금 단계 이름 */
.tp-proc3d__canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;opacity:0;transition:opacity var(--d-7) var(--ease-out);touch-action:pan-y}
.tp-proc3d__cap{position:absolute;left:var(--s-16);bottom:var(--s-16);z-index:1;padding:var(--s-6) var(--s-12);border-radius:var(--r-full);background:var(--surface);box-shadow:var(--sh-sm);
  color:var(--ink);font-size:var(--t-caption);line-height:var(--t-caption-lh);font-weight:650;white-space:pre;opacity:0;transition:opacity var(--d-5) var(--ease-out)}
.tp-proc3d.is-3d{background:radial-gradient(60% 60% at 50% 50%,color-mix(in oklab,var(--accent) 7%,var(--surface)) 0%,var(--surface) 72%)}
.tp-proc3d.is-3d .tp-proc3d__canvas,.tp-proc3d.is-3d .tp-proc3d__cap:not(:empty){opacity:1}
.tp-proc3d.is-3d img{opacity:0;transition:opacity var(--d-5) var(--ease-out)}
/* 3D(hero3d_controller): 첫 장면이 그려지면 사진 대신 캔버스. 그 전·움직임 줄이기·WebGL 없음이면 사진 그대로 */
.tp-hero__canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;opacity:0;transition:opacity var(--d-7) var(--ease-out);touch-action:pan-y}
.tp-hero__photo.is-3d{background:radial-gradient(60% 55% at 50% 52%,color-mix(in oklab,var(--accent) 7%,var(--surface)) 0%,var(--surface) 70%)}
.tp-hero__photo.is-3d .tp-hero__canvas{opacity:1}
.tp-hero__photo.is-3d img{animation:none;opacity:0;transition:opacity var(--d-5) var(--ease-out)}
.tp-hero__photo::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);pointer-events:none}
@keyframes tp-photo-in{from{transform:scale(1.08);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.tp-hero__photo img{animation:none}}

/* 떠 있는 수치 카드 */
.tp-chip{position:absolute;z-index:1;display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-12) var(--s-16);
  background:color-mix(in srgb,var(--surface) 86%,transparent);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-lg);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tp-chip__v{display:flex;align-items:baseline;gap:var(--s-4);color:var(--ink)}
.tp-chip__v b{font-size:var(--t-heading-xl);line-height:1;font-weight:720;font-variant-numeric:tabular-nums}
.tp-chip__v small{font-size:var(--t-body-sm);font-weight:650;color:var(--accent-text)}
.tp-chip__k{font-size:var(--t-body-xs);line-height:var(--t-body-xs-lh);color:var(--ink-muted);white-space:nowrap}
.tp-chip::before{content:"";position:absolute;left:var(--s-16);top:-1px;width:28px;height:3px;border-radius:var(--r-full);background:var(--tp-grad)}
.tp-chip--a{left:0;top:12%}
.tp-chip--b{right:0;top:-2%}
.tp-chip--c{right:8%;bottom:0}
@media (min-width:1024px){.tp-chip--a{left:-2%}.tp-chip--b{right:-3%}}
@media (max-width:479px){.tp-chip{padding:var(--s-8) var(--s-12)}.tp-chip__v b{font-size:var(--t-heading-md)}.tp-chip--c{right:4%}}
@media screen and (prefers-reduced-motion:no-preference){
  .tp-chip{animation:tp-float calc(var(--d-7) * 12) var(--ease-inout) infinite}
  .tp-chip--b{animation-delay:calc(var(--d-7) * -4)}.tp-chip--c{animation-delay:calc(var(--d-7) * -8)}
  .tp-hero[data-fx-idle] .tp-chip{animation-play-state:paused}
}
@keyframes tp-float{0%,100%{translate:0 0}50%{translate:0 -8px}}

/* ══ 2. 시장의 문제 ══ */
.tp-pains{display:grid;gap:var(--s-16);padding:0;list-style:none}
@media (min-width:900px){.tp-pains{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-20)}}
.tp-pain{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"media no" "title title" "desc desc";align-items:start;gap:var(--s-12) var(--s-16);
  padding:var(--s-28);border-radius:var(--r-2xl);background:var(--surface-alt);border:1px solid var(--line);
  transition:transform var(--d-3) var(--ease-out),box-shadow var(--d-3) var(--ease-out),background-color var(--d-3) var(--ease-out)}
@media (hover:hover){.tp-pain:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);background:var(--surface)}}
.tp-pain__media{grid-area:media;display:block;width:112px;aspect-ratio:1;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(closest-side,var(--canvas) 62%,transparent 100%);mask-image:radial-gradient(closest-side,var(--canvas) 62%,transparent 100%)}
.tp-pain__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.25)}
.tp-pain__no{grid-area:no;justify-self:end;font-size:var(--t-body-sm);font-weight:650;color:var(--ink-subtle);font-variant-numeric:tabular-nums}
.tp-pain__title{grid-area:title;margin:var(--s-8) 0 0;color:var(--ink)}
.tp-pain__desc{grid-area:desc;margin:0;color:var(--ink-muted);word-break:keep-all}

/* ══ 3. 그린 카본 플랫폼 흐름 ══ */
.tp-flow{position:relative;display:grid;gap:var(--s-24);padding:0;list-style:none;counter-reset:tpflow}
@media (min-width:640px){.tp-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.tp-flow{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-20)}}
.tp-flow__step{position:relative;display:flex;flex-direction:column;gap:var(--s-12)}
.tp-flow__media{margin:0;border-radius:var(--r-xl)}
.tp-flow__tag{margin:var(--s-8) 0 0;display:flex;align-items:center;gap:var(--s-8);font-size:var(--t-body-xs);line-height:var(--t-body-xs-lh);font-weight:600;color:var(--ink-muted)}
.tp-flow__tag span{padding:var(--s-2) var(--s-8);border-radius:var(--r-full);background:var(--surface);border:1px solid var(--line);color:var(--accent-text)}
.tp-flow__step.is-key .tp-flow__tag span{background:var(--tp-grad);border-color:transparent;color:var(--ink-invert)}
.tp-flow__title{margin:0;color:var(--ink)}
.tp-flow__desc{margin:0;color:var(--ink-muted);word-break:keep-all}
/* 단계를 잇는 선: 넓은 화면에서 사진 아래로 흐른다 */
@media (min-width:1024px){
  .tp-flow::before{content:"";position:absolute;left:0;right:0;top:calc((100% - 0px) * 0 + var(--tp-flow-line,0px));height:2px;display:none}
  .tp-flow__step:not(:last-child)::after{content:"";position:absolute;z-index:1;top:calc(var(--s-48) * 1);right:calc(var(--s-20) / -2 - 14px);width:28px;height:28px;
    clip-path:var(--tp-hex);background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent-line)}
}
.tp-epv{margin-top:var(--s-64)}
.tp-fig{display:flex;align-items:baseline;gap:var(--s-4);white-space:nowrap}
.tp-fig small{font-size:var(--t-heading-sm);font-weight:650;color:var(--accent-text)}

/* ══ 5. 핵심 성능 ══ */
.tp-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-12);padding:0;list-style:none}
@media (min-width:1024px){.tp-specs{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-20)}}
.tp-spec{display:flex;flex-direction:column;gap:var(--s-8);padding:var(--s-20);border-radius:var(--r-2xl);background:var(--surface);border:1px solid var(--line)}
@media (min-width:768px){.tp-spec{padding:var(--s-28)}}
.tp-spec__media{display:block;width:96px;aspect-ratio:1;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(closest-side,var(--canvas) 62%,transparent 100%);mask-image:radial-gradient(closest-side,var(--canvas) 62%,transparent 100%);margin:calc(var(--s-8) * -1) 0 var(--s-8) calc(var(--s-8) * -1)}
.tp-spec__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.3)}
.tp-spec__value{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s-4);color:var(--ink)}
.tp-spec__value b{font-size:var(--t-display-sm);line-height:1.05;font-weight:720;font-variant-numeric:tabular-nums}
.tp-spec__value sup{font-size:var(--t-body-sm)}
.tp-spec__value small{font-size:var(--t-body-sm);font-weight:650;color:var(--accent-text)}
.tp-spec__label{color:var(--ink-muted);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}

/* ══ 6. 소재 비교 ══ */
.tp-compare{display:grid;gap:var(--s-48);align-items:center}
@media (min-width:1024px){.tp-compare{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-80)}}
.tp-compare__lede{margin:var(--s-24) 0 0;color:var(--ink-body);max-width:34rem;word-break:keep-all}
.tp-score{margin:var(--s-32) 0 0;display:grid;gap:0;border-top:1px solid var(--line)}
.tp-score > div{display:flex;justify-content:space-between;align-items:baseline;padding:var(--s-16) 0;border-bottom:1px solid var(--line)}
.tp-score dt{color:var(--ink-muted)}
.tp-score dd{margin:0;color:var(--ink-subtle);font-variant-numeric:tabular-nums}
.tp-score dd b{font-size:var(--t-heading-xl);color:var(--ink);margin-right:var(--s-2)}
.tp-score > div:first-child dt{color:var(--ink);font-weight:650}
.tp-score > div:first-child dd b{background:var(--tp-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

.tp-radar{margin:0;padding:var(--s-24);border-radius:var(--r-3xl);background:var(--tp-grad-soft);border:1px solid var(--line)}
@media (min-width:768px){.tp-radar{padding:var(--s-40)}}
.tp-radar__plot{max-width:560px;margin-inline:auto}
.tp-radar__svg{display:block;width:100%;height:auto;overflow:visible}
.tp-radar__grid{fill:none;stroke:var(--line-strong);stroke-width:1}
.tp-radar__axis{stroke:var(--line);stroke-width:1}
.tp-radar__label{fill:var(--ink-muted);font-size:var(--t-body-sm);font-weight:600}
@media (max-width:639px){.tp-radar{padding:var(--s-16)}.tp-radar__label{font-size:var(--t-heading-lg)}}
.tp-radar__area{stroke-width:2.5;stroke-linejoin:round;transform-origin:200px 200px;transform-box:view-box}
.tp-radar__area--ours{fill:color-mix(in srgb,var(--brand-accent) 26%,transparent);stroke:var(--brand-accent)}
.tp-radar__area--graphite{fill:color-mix(in srgb,var(--warn) 12%,transparent);stroke:var(--warn)}
.tp-radar__area--ceramic{fill:color-mix(in srgb,var(--brand-word-1) 12%,transparent);stroke:var(--brand-word-1);stroke-dasharray:5 4}
.tp-radar__dot{fill:var(--surface);stroke:var(--brand-accent);stroke-width:3;transform-origin:200px 200px;transform-box:view-box}
html.js .tp-radar[data-reveal]:not(.is-in) :is(.tp-radar__area,.tp-radar__dot){transform:scale(0);opacity:0}
.tp-radar__area,.tp-radar__dot{transition:transform calc(var(--d-7) * 2) var(--ease-spring),opacity var(--d-4) var(--ease-out)}
.tp-radar__area--ceramic{transition-delay:var(--d-1)}.tp-radar__area--graphite{transition-delay:var(--d-3)}.tp-radar__area--ours{transition-delay:var(--d-5)}.tp-radar__dot{transition-delay:var(--d-7)}
.tp-radar__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-8) var(--s-20);margin-top:var(--s-20);font-size:var(--t-body-sm);color:var(--ink-body)}
.tp-radar__key{display:inline-flex;align-items:center;gap:var(--s-8)}
.tp-radar__key i{width:14px;height:14px;clip-path:var(--tp-hex)}
.tp-radar__key b{color:var(--ink);font-weight:700}
.tp-radar__key small{color:var(--ink-subtle);font-weight:500}
.tp-radar__key--ours i{background:var(--brand-accent)}
.tp-radar__key--graphite i{background:var(--warn)}
.tp-radar__key--ceramic i{background:var(--brand-word-1)}

/* ══ 7. 적용 분야 ══ */
.tp-apps{--hscroll-h:calc(var(--fx-vh) * 1.9)}
.tp-app.usecase{padding:0;overflow:hidden;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl)}
.tp-app__media{margin:0;aspect-ratio:3 / 2;overflow:hidden}
.tp-app__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-6) var(--ease-out)}
@media (hover:hover){.tp-app:hover .tp-app__media img{transform:scale(1.05)}}
.tp-app__body{padding:var(--s-24);display:flex;flex-direction:column;gap:var(--s-8)}
.tp-app__body h3{margin:0;color:var(--ink)}
.tp-app__en{margin:0;font-size:var(--t-micro);line-height:var(--t-micro-lh);font-weight:650;text-transform:uppercase;color:var(--accent-text)}
.tp-app__desc{margin:0;color:var(--ink-muted);word-break:keep-all}

/* ══ 연혁: 해마다 한 줄(세로로 쌓임), 그 해의 걸음은 가로로 ══ */
.tp-timeline{display:grid;gap:var(--s-40)}
.tp-year{display:grid;gap:var(--s-20)}
@media (min-width:1024px){.tp-year{grid-template-columns:220px minmax(0,1fr);gap:var(--s-32);align-items:start}}
.tp-year__head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s-8) var(--s-16)}
@media (min-width:1024px){.tp-year__head{position:sticky;top:calc(var(--nav-h) + var(--s-24));flex-direction:column;align-items:flex-start}}
.tp-year__no{margin:0;font-size:var(--t-display-lg);line-height:1;font-weight:760;font-variant-numeric:tabular-nums}
.tp-year__no .mline__in{background:var(--tp-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.tp-year__count{margin:0 auto 0 0;font-size:var(--t-body-sm)}
@media (min-width:1024px){.tp-year__count{margin:0}}
.tp-year__ctrl{display:flex;gap:var(--s-8)}
.tp-year:not([data-scrollable]) .tp-year__ctrl{visibility:hidden}
.tp-year__rail{position:relative;min-width:0}
.tp-year__track{display:flex;gap:var(--s-16);margin:0;padding:var(--s-8) var(--s-2) var(--s-24);list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  overscroll-behavior-x:contain;cursor:grab;outline-offset:4px}
.tp-year__track::-webkit-scrollbar{display:none}
.tp-year__track[data-dragging]{cursor:grabbing;scroll-snap-type:none;user-select:none}
.tp-year__track::before{content:"";position:absolute;left:0;right:0;top:calc(var(--s-8) + 23px);height:2px;background:var(--line);pointer-events:none}
.tp-event{position:relative;flex:none;width:min(78vw,280px);scroll-snap-align:start;padding:var(--s-48) var(--s-20) var(--s-20);
  border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);
  transition:transform var(--d-3) var(--ease-out),box-shadow var(--d-3) var(--ease-out),border-color var(--d-3) var(--ease-out)}
@media (hover:hover){.tp-event:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--accent-line)}}
.tp-event__dot{position:absolute;left:var(--s-20);top:16px;width:16px;height:16px;clip-path:var(--tp-hex);background:var(--tp-grad)}
.tp-event__when{display:block;font-size:var(--t-body-sm);font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums}
.tp-event__title{margin:var(--s-8) 0 0;color:var(--ink);word-break:keep-all}
.tp-event__desc{margin:var(--s-8) 0 0;color:var(--ink-muted);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);word-break:keep-all}
.tp-year__progress{height:3px;border-radius:var(--r-full);background:var(--line);overflow:hidden;margin-inline:var(--s-2)}
.tp-year__progress span{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,.08));background:var(--tp-grad);transition:transform var(--d-2) var(--ease-out)}
.tp-year:not([data-scrollable]) .tp-year__progress{display:none}

/* ══ 협력기관 띠(로고가 없으면 이름) ══ */
.tp-partner{display:inline-flex;align-items:center;gap:var(--s-12)}
.tp-partner__mark{width:18px;height:18px;clip-path:var(--tp-hex);background:var(--tp-grad);opacity:.85}
.tp-partner__name{font-size:var(--t-heading-sm);font-weight:650;color:var(--ink-muted);white-space:nowrap}

/* ══ 마지막 권유(밝은 판) ══ */
.tp-cta{position:relative;overflow:hidden;isolation:isolate;display:grid;gap:var(--s-40);align-items:center;border-radius:var(--r-3xl);padding:var(--s-40) var(--s-24);
  background:var(--tp-grad-soft);border:1px solid var(--line)}
.tp-cta::before{content:"";position:absolute;z-index:-1;right:calc(var(--s-120) * -1);top:calc(var(--s-120) * -1);width:420px;height:420px;clip-path:var(--tp-hex);
  background:color-mix(in srgb,var(--brand-accent) 10%,transparent)}
@media (min-width:768px){.tp-cta{padding:var(--s-64)}}
@media (min-width:1024px){.tp-cta{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);padding:var(--s-80);gap:var(--s-64)}}
.tp-cta__kicker{margin:0 0 var(--s-20);font-size:var(--t-micro);line-height:var(--t-micro-lh);font-weight:650;text-transform:uppercase;color:var(--accent-text)}
.tp-cta h2{margin:0;color:var(--ink);word-break:keep-all}
.tp-cta__lede{margin:var(--s-20) 0 0;max-width:32rem;color:var(--ink-body);word-break:keep-all}
.tp-cta__photo{margin:0;aspect-ratio:4 / 3;border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--sh-lg)}
.tp-cta__photo img{width:100%;height:100%;object-fit:cover}

/* ══ 하위 페이지 머리(밝은 면: 제목 + 큰 사진) ══ */
.tp-page-hero{position:relative;overflow:clip;isolation:isolate;padding:calc(var(--nav-h) + var(--s-64)) 0 var(--s-48)}
@media (min-width:1024px){.tp-page-hero{padding:calc(var(--nav-h) + var(--s-96)) 0 var(--s-64)}}
.tp-page-hero__head{display:grid;gap:var(--s-24)}
@media (min-width:1024px){.tp-page-hero__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:var(--s-64)}}
.tp-page-hero__kicker{margin:0 0 var(--s-20);display:flex;align-items:center;gap:var(--s-12);font-size:var(--t-micro);line-height:var(--t-micro-lh);font-weight:650;text-transform:uppercase;color:var(--accent-text)}
.tp-page-hero__kicker::before{content:"";width:14px;height:14px;clip-path:var(--tp-hex);background:var(--tp-grad)}
.tp-page-hero h1{margin:0;color:var(--ink);word-break:keep-all;text-wrap:balance}
.tp-page-hero__lede{margin:0;color:var(--ink-body);font-size:var(--t-body-lg);line-height:var(--t-body-lg-lh);word-break:keep-all;max-width:34rem}
.tp-page-hero__photo{margin:var(--s-40) 0 0;aspect-ratio:16 / 9;border-radius:var(--r-3xl);overflow:hidden;box-shadow:var(--sh-lg)}
@media (min-width:1024px){.tp-page-hero__photo{margin-top:var(--s-64);aspect-ratio:21 / 8}}
.tp-page-hero__photo img{width:100%;height:100%;object-fit:cover}
.tp-page-hero--compact{padding-bottom:0}
.tp-page-hero--compact .tp-page-hero__head{padding-bottom:var(--s-40);border-bottom:1px solid var(--line)}
.tp-page-hero--compact + .section{padding-top:var(--s-48)}

/* 하위 페이지 안 이동(붙는 탭 줄) */
.tp-subnav{position:sticky;top:var(--nav-h);z-index:var(--z-sticky);background:color-mix(in srgb,var(--canvas) 92%,transparent);border-bottom:1px solid var(--line)}
.tp-subnav::before{content:"";position:absolute;inset:0;z-index:-1;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.tp-subnav ul{display:flex;gap:var(--s-4);margin:0;padding:var(--s-8) 0;list-style:none;overflow-x:auto;scrollbar-width:none}
.tp-subnav ul::-webkit-scrollbar{display:none}
.tp-subnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s-16);border-radius:var(--r-full);color:var(--ink-muted);font-weight:600;font-size:var(--t-body-sm);white-space:nowrap;text-decoration:none;
  transition:background-color var(--d-2) var(--ease-inout),color var(--d-2) var(--ease-inout)}
.tp-subnav a:hover{background:var(--tint);color:var(--ink)}
.tp-subnav a[aria-current="true"]{background:var(--ink);color:var(--ink-invert)}
[id].tp-anchor{scroll-margin-top:calc(var(--nav-h) + 72px)}

/* 사진과 글 나란히 */
.tp-split{display:grid;gap:var(--s-40);align-items:center}
@media (min-width:1024px){.tp-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-80)}.tp-split--flip > :first-child{order:2}}
.tp-split__photo{margin:0;border-radius:var(--r-2xl);overflow:hidden;aspect-ratio:4 / 3}
.tp-split__photo img{width:100%;height:100%;object-fit:cover}
.tp-split__body h2,.tp-split__body h3{margin:0;color:var(--ink);word-break:keep-all}
.tp-split__lede{margin:var(--s-20) 0 0;color:var(--ink-body);word-break:keep-all}

/* 체크 줄 목록 */
.tp-checks{display:grid;gap:var(--s-12);padding:0;list-style:none}
.tp-checks li{display:flex;gap:var(--s-12);align-items:flex-start;color:var(--ink-body);word-break:keep-all}
.tp-checks li .ico{flex:none;margin-top:var(--s-2);color:var(--accent-text)}

/* 회사 개요 · 미션 */
.tp-mission{font-size:var(--t-display-sm);line-height:1.3;font-weight:650;color:var(--ink);word-break:keep-all;margin:0;max-width:24em}
.tp-values{display:grid;gap:var(--s-16);padding:0;list-style:none}
@media (min-width:900px){.tp-values{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-20)}}
.tp-value{padding:var(--s-28);border-radius:var(--r-2xl);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s-8)}
.tp-value__media{display:block;width:104px;aspect-ratio:1;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(closest-side,var(--canvas) 62%,transparent 100%);mask-image:radial-gradient(closest-side,var(--canvas) 62%,transparent 100%);margin-bottom:var(--s-8)}
.tp-value__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.3)}
.tp-value__en{margin:0;font-size:var(--t-micro);line-height:var(--t-micro-lh);font-weight:650;text-transform:uppercase;color:var(--accent-text)}
.tp-value h3{margin:0;color:var(--ink)}
.tp-value p{margin:0;color:var(--ink-muted);word-break:keep-all}

/* 오시는 길 */
.tp-places{display:grid;gap:var(--s-20)}
@media (min-width:900px){.tp-places{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tp-place{display:flex;flex-direction:column;gap:var(--s-12);padding:var(--s-28);border-radius:var(--r-2xl);background:var(--surface);border:1px solid var(--line)}
.tp-place__label{margin:0;display:inline-flex;align-items:center;gap:var(--s-8);font-weight:650;color:var(--accent-text);font-size:var(--t-body-sm)}
.tp-place h3{margin:0;color:var(--ink);word-break:keep-all}
.tp-place__addr{margin:0;color:var(--ink-body);word-break:keep-all}
.tp-place__links{display:flex;flex-wrap:wrap;gap:var(--s-8);margin-top:auto;padding-top:var(--s-8)}

/* 사업 분야 상세 */
.tp-biz{display:grid;gap:var(--s-40)}
@media (min-width:1024px){.tp-biz{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-64);align-items:start}.tp-biz__copy{position:sticky;top:calc(var(--nav-h) + 96px)}}
.tp-biz__no{margin:0 0 var(--s-16);font-size:var(--t-body-sm);font-weight:700;color:var(--accent-text)}
.tp-biz__copy h2{margin:0;color:var(--ink);word-break:keep-all}
.tp-biz__lede{margin:var(--s-20) 0 0;color:var(--ink-body);word-break:keep-all}
.tp-biz__media{display:grid;gap:var(--s-16)}
.tp-biz__media figure{margin:0;border-radius:var(--r-2xl);overflow:hidden}
.tp-biz__media img{width:100%;height:100%;object-fit:cover}
.tp-biz__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-16)}
.tp-biz__pair figure{aspect-ratio:1}

/* 드론 적용 설계도 */
.tp-drone{display:grid;gap:var(--s-32);align-items:center;padding:var(--s-24);border-radius:var(--r-3xl);background:var(--surface);border:1px solid var(--line)}
@media (min-width:1024px){.tp-drone{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:var(--s-48);gap:var(--s-48)}}
.tp-drone__photo{margin:0;aspect-ratio:3 / 2;border-radius:var(--r-xl);overflow:hidden;background:var(--surface)}
.tp-drone__photo img{width:100%;height:100%;object-fit:contain}
.tp-layers{display:grid;gap:var(--s-8);padding:0;list-style:none}
.tp-layer{display:flex;align-items:center;gap:var(--s-12);padding:var(--s-12) var(--s-16);border-radius:var(--r-lg);background:var(--surface-alt);color:var(--ink-body);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}
.tp-layer b{color:var(--ink);white-space:nowrap}
.tp-layer--hot{background:color-mix(in srgb,var(--warn) 10%,var(--surface));color:var(--warn-text)}
.tp-layer--ours{background:color-mix(in srgb,var(--brand-accent) 12%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand-accent) 40%,transparent)}
.tp-layer--ours b{color:var(--accent-text)}
.tp-layer{flex-wrap:wrap;row-gap:var(--s-2)}
.tp-layer__tag{margin-left:auto;font-size:var(--t-body-xs);color:var(--ink-muted);white-space:nowrap} /* 좁은 화면에서 자리가 모자라면 설명이 통째로 다음 줄 오른쪽으로 */

/* 경쟁력 여섯 */
.tp-advs{display:grid;gap:var(--s-16);padding:0;list-style:none}
@media (min-width:640px){.tp-advs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.tp-advs{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-20)}}
.tp-adv{padding:var(--s-28);border-radius:var(--r-2xl);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s-8)}
.tp-adv__value{margin:0;font-size:var(--t-display-sm);line-height:1.1;font-weight:740;background:var(--tp-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.tp-adv h3{margin:0;color:var(--ink)}
.tp-adv ul{margin:var(--s-4) 0 0;padding-left:1.1em;color:var(--ink-muted);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh);word-break:keep-all}
.tp-adv li + li{margin-top:var(--s-4)}

/* 왜 커피박인가 */
.tp-why{display:grid;gap:var(--s-16);padding:0;list-style:none}
@media (min-width:900px){.tp-why{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-20)}}
.tp-why li{padding:var(--s-28);border-radius:var(--r-2xl);background:var(--surface);border:1px solid var(--line)}
.tp-why h3{margin:0 0 var(--s-12);color:var(--ink)}
.tp-why p{margin:0;color:var(--ink-muted);word-break:keep-all}
.tp-quote{margin:0;font-size:var(--t-display-sm);line-height:1.25;font-weight:700;color:var(--ink);word-break:keep-all}

/* 소식 */
.tp-news-cats{margin-top:var(--s-32)}
.tp-article{max-width:var(--w-narrow);margin-inline:auto}
.tp-article p{margin:0 0 var(--s-20);color:var(--ink-body);font-size:var(--t-body-lg);line-height:1.85;word-break:keep-all}
.tp-cover-empty{display:block;aspect-ratio:3 / 2;background:var(--tp-grad-soft)}

/* 채용 */
.tp-jobs-empty{display:grid;gap:var(--s-20);justify-items:start;padding:var(--s-40);border-radius:var(--r-2xl);background:var(--surface);border:1px dashed var(--line-strong)}
.tp-jobs-empty h3{margin:0;color:var(--ink)}
.tp-jobs-empty p{margin:0;color:var(--ink-muted);word-break:keep-all}
.tp-jobmeta{display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-20);margin:var(--s-20) 0 0;padding:0;list-style:none;color:var(--ink-muted);font-size:var(--t-body-sm)}
.tp-jobmeta li{display:inline-flex;align-items:center;gap:var(--s-6)}

/* 푸터 회사 정보 */
.site-footer{--ghost-size:clamp(40px,13.5vw,190px)} /* 바닥 글자 Thermophene(11자)이 360px 에서도 잘리지 않게 */
.site-footer__claim{margin:var(--s-16) 0 0;color:var(--ink)}
.site-footer__info{display:grid;gap:var(--s-8) var(--s-32);margin:var(--s-40) 0 0;padding:var(--s-24) 0 0;border-top:1px solid var(--line);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}
@media (min-width:768px){.site-footer__info{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1280px){.site-footer__info{grid-template-columns:repeat(3,minmax(0,1fr))}}
.site-footer__info > div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:var(--s-12)}
.site-footer__info dt{color:var(--ink-subtle)}
.site-footer__info dd{margin:0;color:var(--ink-muted);word-break:keep-all}

/* 문의: 밝은 브랜드 면 + 사진 */
.tp-contact__intro{background:var(--tp-grad-soft);border-right:1px solid var(--line);padding-top:calc(var(--nav-h) + var(--s-40))}
.tp-contact__intro .site-contact__title,.tp-contact__intro .site-contact__lede{color:var(--ink)}
.tp-contact__intro .site-contact__lede{color:var(--ink-body)}
.tp-contact__photo{margin:0 0 var(--s-32);border-radius:var(--r-2xl);overflow:hidden;aspect-ratio:16 / 9;box-shadow:var(--sh-md);position:relative;z-index:1}
.tp-contact__photo img{width:100%;height:100%;object-fit:cover}
@media (max-width:767px),(min-width:1024px){.tp-contact__photo{display:none}} /* 휴대폰은 양식이 먼저 보이게, 넓은 화면은 왼쪽 면이 대신한다 */
.tp-sent{position:relative;overflow:clip;isolation:isolate;padding:calc(var(--nav-h) + var(--s-96)) 0 var(--s-120);text-align:center}
.tp-sent .site-sent__inner{display:flex;flex-direction:column;align-items:center}
.tp-sent__mark{display:inline-grid;place-items:center;width:88px;height:88px;clip-path:var(--tp-hex);background:var(--tp-grad);color:var(--ink-invert);margin-bottom:var(--s-24)}
.tp-sent .site-sent__actions{justify-content:center}
.tp-policy h2{margin:var(--s-40) 0 var(--s-12);color:var(--ink)}
.tp-policy h2:first-child{margin-top:0}

/* 소식·공고 상세: 떠 있는 내비 아래에서 시작 */
.tp-post__head{padding-top:var(--s-40)}
@media (min-width:1024px){.tp-post__head{padding-top:var(--s-80)}}
.tp-post__head .post-head__title{color:var(--ink);word-break:keep-all;text-wrap:balance}
.tp-post__body{padding:var(--s-40) 0 var(--s-80)}
@media (min-width:1024px){.tp-post__body{padding:var(--s-64) 0 var(--s-120)}}
.tp-post__back{margin-top:var(--s-40)}
.tp-partner__img{height:34px;width:auto}
.tp-adv__logo{display:flex;align-items:center;min-height:64px;margin-bottom:var(--s-8)}

/* 세 칸 숫자 띠(모바일은 한 줄씩) */
.tp-facts{display:grid;border-top:1px solid var(--line)}
@media (min-width:768px){.tp-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tp-facts__item{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:var(--s-12);padding:var(--s-24) 0;border-bottom:1px solid var(--line)}
@media (min-width:768px){.tp-facts__item{padding:var(--s-32) var(--s-24) var(--s-32) 0}.tp-facts__item + .tp-facts__item{border-left:1px solid var(--line);padding-left:var(--s-24)}}
.tp-facts__label{color:var(--ink-muted);font-size:var(--t-body-sm);line-height:var(--t-body-sm-lh)}
.tp-facts__value{margin:0;color:var(--ink);font-size:var(--t-display-md);line-height:1;font-weight:700;font-variant-numeric:tabular-nums}

/* 목록 기본 여백은 낮은 우선순위로만 지운다(section-body--* 간격이 이기게) */
:where(.tp-values,.tp-advs,.tp-why,.tp-facts,.tp-layers,.tp-pains,.tp-specs,.tp-flow,.tp-checks){margin-block:0}
:where(.tp-checks){margin-top:var(--s-28)}

/* 사업 분야의 적용 분야: 고정하지 않고 옆으로 넘기는 띠(첫 카드는 컨테이너 왼쪽 선에) */
.tp-apps-row .hscroll__track{display:flex;gap:var(--s-16);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-inline:max(var(--s-20),calc((100vw - var(--w-wide)) / 2 + var(--s-40)));padding-bottom:var(--s-8)}
.tp-apps-row .hscroll__track::-webkit-scrollbar{display:none}
.tp-apps-row .hscroll__card{flex:none;width:min(80vw,340px);scroll-snap-align:start}
@media (max-width:479px){.tp-spec__value b{font-size:var(--t-heading-xl)}.tp-spec__value{flex-wrap:nowrap;white-space:nowrap}.tp-spec{padding:var(--s-16)}}