:root{
  --trl-black:#000000;
  --trl-orange:#D74D29;
  --trl-white:#FFFFFF;
  --trl-offwhite:#F5F2EC;
  --trl-asphalt:#141414;
  --trl-steel:#7A7A7A;
  --trl-line:#2A2A2A;
  --font-display:'Oswald',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --vh100:100dvh;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--trl-white);
  color:var(--trl-black);
  font-family:var(--font-body);
  line-height:1.6;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul{list-style:none;}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;width:100%;}
:focus-visible{outline:3px solid var(--trl-orange);outline-offset:3px;}

/* ---------- SCROLL SLIDE CONTAINER ---------- */
#scroller{
  height:var(--vh100);
  overflow-y:scroll;
  overflow-x:hidden;
  scroll-behavior:smooth;
}
.slide{
  position:relative;
  min-height:var(--vh100);
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}
.slide-inner{
  width:100%;
  padding:56px 0;
}

/* reveal-on-view animation */
.rise{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.slide.in-view .rise{opacity:1;transform:translateY(0);}
.rise:nth-child(1){transition-delay:.02s;}
.rise:nth-child(2){transition-delay:.10s;}
.rise:nth-child(3){transition-delay:.18s;}
.rise:nth-child(4){transition-delay:.26s;}
@media (prefers-reduced-motion: reduce){
  .rise{opacity:1;transform:none;transition:none;}
}

/* ---------- HEADER (overlay, fixed to viewport) ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
header.on-light{background:rgba(255,255,255,0.92);backdrop-filter:blur(8px);border-color:#E7E3DA;color:var(--trl-black);}
header.on-dark{background:rgba(0,0,0,0.55);backdrop-filter:blur(8px);border-color:#2A2A2A;color:var(--trl-white);}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;max-width:1180px;margin:0 auto;
}
.nav-logo img{height:36px;width:auto;border-radius:4px;}
.nav-links{display:flex;gap:30px;font-family:var(--font-display);font-weight:500;font-size:13.5px;letter-spacing:0.06em;text-transform:uppercase;}
.nav-links a{position:relative;padding:6px 0;cursor:pointer;}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--trl-orange);transition:width .25s ease;
}
.nav-links a.active::after,.nav-links a:hover::after,.nav-links a:focus-visible::after{width:100%;}

/* ---------- NAV RIGHT AREA (EN 버튼 포함) ---------- */
.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-lang {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 6px;
  transition: color 0.2s;
}
.nav-lang:hover {
  color: var(--trl-orange);
}

.nav-cta{
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  border:1.5px solid currentColor;padding:8px 16px;
  text-transform:uppercase;letter-spacing:0.06em;
  transition:background .2s,color .2s;cursor:pointer;
}
header.on-light .nav-cta:hover{background:var(--trl-black);color:var(--trl-white);}
header.on-dark .nav-cta:hover{background:var(--trl-white);color:var(--trl-black);}
.nav-toggle{display:none;padding:8px;}
.nav-toggle span{display:block;width:22px;height:2px;background:currentColor;margin:5px 0;}

/* ---------- DOT NAV (right side) ---------- */
.dotnav{
  position:fixed;right:26px;top:50%;transform:translateY(-50%);
  z-index:100;display:flex;flex-direction:column;gap:16px;
}
.dotnav button{
  width:9px;height:9px;border-radius:50%;
  border:1.5px solid rgba(120,120,120,0.6);
  position:relative;transition:all .25s;
}
.dotnav button.active{background:var(--trl-orange);border-color:var(--trl-orange);transform:scale(1.3);}
.dotnav button .dot-label{
  position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:10px;white-space:nowrap;
  background:var(--trl-black);color:var(--trl-white);padding:5px 9px;
  opacity:0;pointer-events:none;transition:opacity .2s;text-transform:uppercase;letter-spacing:0.06em;
}
.dotnav button:hover .dot-label{opacity:1;}
@media (max-width:760px){.dotnav{display:none;}}

/* ---------- HERO ---------- */
.hero{background:var(--trl-black);color:var(--trl-white);}
.hero-line-svg{position:absolute;inset:0;width:100%;height:100%;opacity:0.9;pointer-events:none;}
.hero-line-svg path{
  fill:none;stroke:var(--trl-orange);stroke-width:2.5;
  stroke-dasharray:2200;stroke-dashoffset:2200;
  animation:drawline 2.6s cubic-bezier(.65,0,.35,1) forwards .3s;
}
@media (prefers-reduced-motion: reduce){.hero-line-svg path{animation:none;stroke-dashoffset:0;}}
@keyframes drawline{to{stroke-dashoffset:0;}}
.hero-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%;padding:0 24px;}
.eyebrow{
  font-family:var(--font-mono);font-size:13px;color:var(--trl-orange);
  letter-spacing:0.18em;text-transform:uppercase;margin-bottom:20px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--trl-orange);}
.hero h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(48px,11vw,140px);line-height:0.88;
  letter-spacing:-0.01em;text-transform:uppercase;
}
.hero h1 .accent{color:var(--trl-orange);}
.hero-sub{
  font-family:var(--font-display);font-weight:400;font-size:clamp(15px,2.2vw,21px);
  color:#CFCFCF;text-transform:uppercase;letter-spacing:0.08em;margin-top:16px;
}
.hero-tagline{max-width:500px;margin-top:20px;font-size:16px;color:#B9B9B9;}
.hero-ctas{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap;}
.btn{
  font-family:var(--font-display);font-weight:600;font-size:13.5px;
  text-transform:uppercase;letter-spacing:0.06em;
  padding:14px 28px;border:1.5px solid var(--trl-white);
  transition:all .2s ease;display:inline-block;
}
.btn-solid{background:var(--trl-orange);border-color:var(--trl-orange);color:var(--trl-white);}
.btn-solid:hover{background:#c2431f;border-color:#c2431f;}
.btn-outline{color:var(--trl-white);}
.btn-outline:hover{background:var(--trl-white);color:var(--trl-black);}

.scroll-indicator{
  position:absolute;bottom:28px;left:0;right:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;
  color:#8A8A8A;text-transform:uppercase;
}
.scroll-indicator .bar{width:1px;height:34px;background:linear-gradient(#8A8A8A,transparent);animation:pulse-bar 1.8s ease-in-out infinite;}
@keyframes pulse-bar{0%,100%{opacity:.3;}50%{opacity:1;}}
@media (prefers-reduced-motion: reduce){.scroll-indicator .bar{animation:none;}}

/* ---------- SECTION HEAD (shared) ---------- */
.section-head{margin-bottom:clamp(24px,4vh,48px);max-width:640px;}
.section-eyebrow{
  font-family:var(--font-mono);font-size:12px;color:var(--trl-orange);
  letter-spacing:0.16em;text-transform:uppercase;margin-bottom:12px;
  display:flex;align-items:center;gap:10px;
}
.section-eyebrow::before{content:'';width:22px;height:1px;background:var(--trl-orange);}
.section-head h2{
  font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4.6vw,50px);
  text-transform:uppercase;line-height:1.02;letter-spacing:-0.01em;
}
.section-head p{margin-top:12px;color:var(--trl-steel);font-size:15px;max-width:520px;}

/* ---------- ABOUT ---------- */
.about{background:var(--trl-white);}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.about-text p{color:#3a3a3a;font-size:15px;margin-bottom:14px;}
.about-text p:last-child{margin-bottom:0;}
.about-values{display:flex;flex-direction:column;border-top:1px solid #E7E3DA;}
.value-row{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid #E7E3DA;}
.value-row .vnum{font-family:var(--font-mono);color:var(--trl-orange);font-weight:700;font-size:13px;}
.value-row h3{font-family:var(--font-display);font-size:15.5px;text-transform:uppercase;margin-bottom:4px;letter-spacing:0.02em;}
.value-row p{color:var(--trl-steel);font-size:13.5px;}

/* ---------- ROSTER ---------- */
.roster{background:var(--trl-offwhite);}
.roster-grid{
  display:flex;gap:2px;background:#DDD8CC;
  align-items:stretch;min-height:420px;
}
.driver-card{
  position:relative;flex:1 1 0;background:var(--trl-white);
  padding:26px 22px;overflow:hidden;cursor:pointer;
  transition:flex-grow .45s cubic-bezier(.25,.8,.25,1),background .3s ease;
  display:flex;flex-direction:column;
}
.driver-card:hover,.driver-card.expanded{
  flex-grow:2.6;background:var(--trl-black);color:var(--trl-white);
}
.driver-card:hover .driver-role,.driver-card.expanded .driver-role,
.driver-card:hover .stat-label,.driver-card.expanded .stat-label{color:#B9B9B9;}
.driver-card:hover .driver-num,.driver-card.expanded .driver-num{color:var(--trl-orange);}

.driver-helmet{
  position:absolute;top:20px;right:18px;width:44px;height:44px;
  opacity:.55;transition:all .45s cubic-bezier(.25,.8,.25,1);
  pointer-events:none;
}
.driver-card:hover .driver-helmet,.driver-card.expanded .driver-helmet{
  width:92px;height:92px;top:22px;right:22px;opacity:1;transform:rotate(-6deg);
}
.driver-helmet svg{width:100%;height:100%;}
.driver-helmet img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;box-shadow:0 0 0 2px rgba(215,77,41,0.5);}

.driver-num{font-family:var(--font-mono);font-size:12px;color:var(--trl-steel);letter-spacing:0.08em;margin-bottom:14px;display:block;}
.driver-name{font-family:var(--font-display);font-size:20px;text-transform:uppercase;font-weight:600;letter-spacing:0.01em;white-space:nowrap;}
.driver-role{font-size:11.5px;color:var(--trl-steel);margin-top:3px;margin-bottom:14px;text-transform:uppercase;letter-spacing:0.04em;white-space:nowrap;}
.driver-stats{display:flex;gap:18px;padding-top:12px;border-top:1px solid #E7E3DA;margin-top:auto;}
.driver-card:hover .driver-stats,.driver-card.expanded .driver-stats{border-top-color:#333;}

.driver-detail{
  max-height:0;opacity:0;margin-top:0;
  transition:max-height .45s cubic-bezier(.25,.8,.25,1),opacity .3s ease,margin-top .45s ease;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.driver-card:hover .driver-detail,.driver-card.expanded .driver-detail{
  max-height:250px;
  opacity:1;
  margin-top:16px;
  margin-bottom:12px;
}
.driver-detail p{font-size:13px;color:#CFCFCF;line-height:1.55;margin-bottom:10px;}
.driver-detail .detail-track{font-family:var(--font-mono);font-size:11px;color:var(--trl-orange);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:12px;display:block;}

.driver-equip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  width: 100%;
}
.driver-equip div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
  padding-bottom: 4px;
  color: #333333;
}
.driver-card:hover div.driver-equip div,.driver-card.expanded div.driver-equip div {
  border-bottom-color: rgba(255, 255, 255, 0.15);
  color: #CFCFCF;
}
.driver-equip span {color: var(--trl-steel);}
.driver-card:hover .driver-equip span,.driver-card.expanded .driver-equip span {color: #8A8A8A;}
.driver-equip strong {font-weight: 500;}

.stat-val{font-family:var(--font-mono);font-size:14px;font-weight:700;}
.stat-label{font-family:var(--font-mono);font-size:9px;color:var(--trl-steel);text-transform:uppercase;letter-spacing:0.06em;margin-top:2px;}

/* ---------- RESULTS ---------- */
.results{background:var(--trl-black);color:var(--trl-white);}
.results .section-head p{color:#A5A5A5;}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 16px;
}
.results-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:13px; min-width: 500px;}
.results-table thead th{
  text-align:left;padding:10px 14px;border-bottom:1px solid #333;
  color:var(--trl-orange);font-size:10.5px;text-transform:uppercase;letter-spacing:0.1em;font-weight:500;
}
.results-table tbody td{padding:13px 14px;border-bottom:1px solid #262626;}
.results-table tbody tr:hover{background:#1B1B1B;}
.pos{font-weight:700;font-size:15px;}
.pos.p1{color:var(--trl-orange);}
.results-table td.class-cell{color:#999;}

/* ---------- NEWS ---------- */
.news{background:var(--trl-white);}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.news-card{border-top:2px solid var(--trl-black);padding-top:16px;}
.news-date{font-family:var(--font-mono);font-size:11px;color:var(--trl-orange);letter-spacing:0.06em;}
.news-card h3{font-family:var(--font-display);font-size:19px;text-transform:uppercase;margin:9px 0 9px;line-height:1.15;}
.news-card p{color:var(--trl-steel);font-size:13.5px;margin-bottom:10px;}
.news-link{font-family:var(--font-mono);font-size:11px;font-weight:700;text-transform:uppercase;border-bottom:1.5px solid var(--trl-black);padding-bottom:2px;}

/* ---------- GALLERY ---------- */
.gallery{background:var(--trl-offwhite);}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;height:min(320px,32vh);}
.g-item{position:relative;overflow:hidden;background:var(--trl-black);display:flex;align-items:center;justify-content:center;}
.g-item svg{width:34%;height:34%;opacity:0.5;}
.g-item .g-label{position:absolute;bottom:10px;left:12px;font-family:var(--font-mono);font-size:9.5px;color:var(--trl-white);opacity:0.6;text-transform:uppercase;letter-spacing:0.08em;}

/* ---------- CONTACT ---------- */
.contact{background:var(--trl-black);color:var(--trl-white);text-align:center;}
.contact .section-head{margin:0 auto 32px;text-align:center;}
.contact .section-eyebrow{justify-content:center;}
.contact .section-eyebrow::before{display:none;}
.contact-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:56px;}
.contact-link{
  font-family:var(--font-display);font-size:13.5px;text-transform:uppercase;
  letter-spacing:0.05em;border:1.5px solid #333;padding:13px 24px;transition:all .2s;
}
.contact-link:hover{border-color:var(--trl-orange);color:var(--trl-orange);}
.foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px solid #262626;padding-top:22px;}
.foot-row img{height:22px;opacity:0.8;}
.foot-note{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.04em;color:#777;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  .nav-cta {display:none;}
  
  .about-grid{grid-template-columns:1fr;gap:26px;}
  .roster-grid{flex-direction:column;min-height:0;}
  
  .driver-card {
    flex: none !important; /* PC용 고무줄 속성 강제 해제 (납작해짐 방지) */
    height: auto !important; /* 내용물에 맞춰 높이가 자연스럽게 잡히도록 설정 */
    min-height: 85px; /* 카드가 닫혀있을 때 헬멧과 이름이 보일 수 있는 최소 높이 확보 */
    padding: 24px 20px !important;
  }
  .driver-card.expanded{background:var(--trl-black);color:var(--trl-white);}
  .driver-card:hover .driver-detail, .driver-card.expanded .driver-detail { max-height: 250px; }
  
  .news-grid{grid-template-columns:1fr;gap:20px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);height:min(360px,44vh);}
  
  .results-table{font-size:12px;}
  .results-table thead th,.results-table tbody td{padding:10px 8px;}
}

@media (max-width:520px){
  .hero h1 { font-size: 65px; line-height: 1; }
  .hero-sub { font-size: 13px; }
  .section-head h2 { font-size: 32px; }
  .driver-card{padding:14px 16px;}
}

/* =========================================
   [모바일 탭(소개, 멤버, 소식) 가로 길이 최적화 추가 코드] 
   ========================================= */

html, body {
  overflow-x: hidden;
  width: 100%;
}
* {
  word-break: keep-all;
  overflow-wrap: break-word;
}

@media (max-width: 860px) {
  .section-head { margin-bottom: 24px; }
  .about-grid { gap: 32px; }
  .value-row { padding: 12px 0; }
  
  .driver-card { padding: 18px !important; }
  .driver-detail p { font-size: 12.5px; }
  
  .news-grid { gap: 16px; }
  .news-card { padding-top: 12px; }
  .news-card h3 { font-size: 17px; margin: 6px 0; }
}

@media (max-width: 520px) {
  .value-row { grid-template-columns: 40px 1fr; gap: 12px; }
  .driver-stats { flex-direction: column; gap: 8px; border-top: none; padding-top: 4px; }
  .driver-stats > div { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #E7E3DA; padding-top: 6px; }
}

/* --- 🚨 피그마 캡처용 임시 무적 코드 (캡처 끝나면 꼭 지우기!) --- */
#scroller { height: auto !important; overflow: visible !important; }
.slide { min-height: 100vh !important; height: auto !important; }
.rise { opacity: 1 !important; transform: none !important; }