/* =========================
   TATTOOIST 3D — styles.css (deduped)
   ========================= */

/* --------- Reset --------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
img { max-width: 100%; display: block; }

/* --------- CSS Vars --------- */
:root{
  --bg:#0f0f10;
  --panel:#151517;
  --muted:#0a0a0b;
  --text:#eaeaea;
  --text-dim:#adadad;
  --brand:#7c5cff;
  --brand-2:#00d3a7;
  --shadow:0 8px 30px rgba(0,0,0,.35);
  --radius:16px;
  --container:1500px;
  --gutter:1rem;

  /* 헤더 총 높이(패딩 포함 추정). 필요 시 프로젝트에서 한 값으로 통일 */
  --header-h:72px;

  /* (정의만 있고 미사용이었던 토큰은 실제 적용이 있을 때 활성) */
  --nav-gap:.8rem;
  /* Layer tokens */
  --z-assets-panel: 990;
  --z-header: 1000;
  --z-user-menu: 1010;
}

html{ scroll-behavior:smooth; }

body{
  display:flex; flex-direction:column; min-height:100dvh;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
  line-height:1.6;
}

#main{ flex:1 0 auto; }

a{ color:#E0E0E0; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-pad, 1rem); /* ← 여백은 패딩 변수로 관리 */
}
.section{ padding: var(--section-pad-y, 72px) 0; }
.section.muted{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }
/* ✅ #simulate만 더 어두운 회색 톤으로 */
#simulate.section.muted{
  --section-pad-y: 0px; /* ✅ simulate 섹션만 위/아래 패딩 제거 */

  background: #0A0A0AFF;
}
.lede{ color:var(--text-dim); max-width:64ch; font-size: var(--lede-size, 1rem); }
.extra-bold{ font-weight:900; letter-spacing:.5px; }

/* Footer (살짝 반투명) */
.site-footer{
  backdrop-filter:blur(8px);
  background:rgba(10,10,11,.24);
  border-top:1px solid rgba(255,255,255,.06);
}

.spacer{height:1.25rem;}
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Cards / Panel (미사용 가능성 있으나 컴포넌트로 유지) */
.card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem 1.2rem; transition:none; }
.card:hover{ transform:none; box-shadow:var(--shadow); }
.panel{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:calc(var(--radius) + 4px); padding:1.2rem; }

/* Grids (컴포넌트 유지) */
.grid{ display:grid; gap:1rem; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } }

.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:1024px){ .feature-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .feature-grid{ grid-template-columns:1fr;} }

.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:.6rem; }
.stat{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:.7rem .9rem; }
.stat b{ font-size:1.1rem; }
.stat span{ display:block; color:var(--text-dim); font-size:.85rem; }

.list-check{ list-style:none; margin:0; padding:0; }
.list-check li{ position:relative; padding-left:1.4rem; margin:.45rem 0; }
.list-check li::before{ content:"✓"; position:absolute; left:0; top:.05rem; color:var(--brand-2); font-weight:900; }

/* Full-bleed section wrapper */
.full-bleed{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }

/* --------- Header / Nav --------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-header);
  background:transparent; border-bottom:0;
  transition:background .2s ease, border-color .2s ease;
  isolation:isolate;
 
}

/* ✅ blur 레이어를 헤더 자신이 아니라 pseudo-element로 분리 */
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(10,10,11,.24);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;                 /* 기본은 투명 */
  transition: opacity .2s ease, background .2s ease;
  pointer-events:none;
  z-index:0;                  /* 헤더 콘텐츠 뒤 */
}
/* 헤더 내용은 blur 레이어 위로 */
.site-header .header-inner{ position:relative; z-index:1; }

/* 스크롤 시 blur 레이어 표시 */
.site-header.is-solid::before{ opacity:1; }

/* ✅ Assets 패널이 열려있으면(스크롤 0이어도) 헤더 blur 레이어를 강제로 켬 */
body.assets-open .site-header::before,
body.product-open .site-header::before{
  opacity: 1;
  /* iOS에서 backdrop-filter가 “완전 투명(0)”이면 안 먹는 경우가 있어,
     아주 약한 알파를 주는 게 안전함 */
  background: rgba(10,10,11,.18);
}
/* ✅ FIX: 스크롤로 is-solid가 된 상태에서 드로어 열면(특히 iOS) fixed가 깨질 수 있어
   메뉴 열림 동안 헤더 blur를 비활성화 */

/* ▼ 햄버거(checkbox) ON일 때: 헤더도 드로어와 동일한 반투명/블러 적용 */
.site-header:has(.nav-toggle:checked)::before{
  opacity:1;
  background: rgba(10,10,11,.70);
}
@media (max-width:900px){
  /* (선택) 드로어 열려 있을 때 바디 스크롤 잠금 */
  body:has(.nav-toggle:checked){ overflow: hidden; }
}
/* header-inner (중복 통합) */
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:18px 0;
}
.brand{ display:inline-flex; align-items:center; gap:.6rem; font-weight:700; letter-spacing:.5px; }
.brand img{ filter:drop-shadow(0 2px 10px rgba(160,160,170,.35)); }

.site-header .site-nav{ flex:1 1 auto; display:flex; align-items:center; gap:1rem; }
.site-nav .menu{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:calc(var(--nav-gap)); }
.site-nav .menu > li > a,
.site-nav .menu > li > .nav-assets-toggle,
.site-nav .menu > li > .nav-product-toggle,
.assets-summary,
.dropdown-toggle{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.6rem .9rem;
  border-radius:999px;
  border:1px solid transparent;
}
.site-nav a:hover,
.site-nav .nav-assets-toggle:hover,
.site-nav .nav-product-toggle:hover,
.dropdown-toggle:hover{
  background:rgba(255,255,255,.06);
}
/* Assets 토글 버튼 기본 리셋 */
.nav-assets-toggle,
.nav-product-toggle{
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
/* Mobile-only assets accordion base */
.assets-details{ display:none; }
.assets-summary{
  cursor:pointer;
  width:100%;
  justify-content:space-between;
}
.assets-summary::-webkit-details-marker{ display:none; }
.assets-summary::after{
  content:"";
  width:.55rem; height:.55rem;
  display:inline-block;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  opacity:.9;
}
.assets-details[open] .assets-summary::after{
  transform: translateY(3px) rotate(-135deg);
}
.assets-submenu{
  display:grid;
  gap:.5rem;
  padding:.4rem .6rem .6rem;
}
.assets-submenu a{
  display:block;
  padding:.9rem 1rem;
  border-radius:12px;
}
.assets-submenu a:hover{ background:rgba(255,255,255,.06); }
/* 활성 링크 시각 피드백 */
.site-nav a[aria-current="page"]{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
}

/* 우측 영역(로그인/로그아웃) + 중앙 정렬 레이아웃 */
.site-header .nav-center{ flex:1 1 0%; min-width:0; display:flex; justify-content:center; }
.site-header .nav-right{ flex:0 0 auto; display:flex; align-items:center; gap:calc(var(--nav-gap)); white-space:nowrap; }
.site-header .nav-right a{ display:inline-flex; align-items:center; }

/* Nav CTA 버튼 (무채색 그라데이션 칩) */
.site-nav .menu > li > .nav-cta{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.6rem 1rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  color:var(--text); font-weight:600; text-decoration:none;
  transition:background .2s ease, border-color .2s ease;
}
.site-nav .menu > li > .nav-cta:hover,
.site-nav .menu > li > .nav-cta:focus-visible{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.26);
  text-decoration:none;
}

/* Dropdown */
.dropdown{ position:relative; }
.dropdown-toggle{ background:linear-gradient(180deg, rgba(124,92,255,.15), rgba(255,255,255,0)); border-color:rgba(124,92,255,.35); cursor:pointer; }
.dropdown .chevron{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.dropdown-menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:220px; background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); box-shadow:var(--shadow); padding:.4rem; display:none; }
.dropdown-menu a{ display:block; padding:.6rem .8rem; border-radius:12px; color:var(--text); }
.dropdown-menu a:hover{ background:rgba(255,255,255,.06); }
.dropdown:focus-within .dropdown-menu, .dropdown:hover .dropdown-menu{ display:block; }

/* Hamburger (checkbox hack) */
.nav-toggle{ position:absolute; opacity:0; pointer-events:none; }
 /* Hamburger button – precise centering & white border */
 .hamburger{
   --hb: 36px;                  /* 고정 정사각형 → 선이 결코 밖으로 안 나감 */
   width:var(--hb); height:var(--hb);
   display:none; place-items:center;
   position:relative;           /* ::before 기준점 */
   padding:8px; border-radius:10px;
   line-height:0; overflow:hidden; /* 바가 테두리 밖으로 튀는 현상 차단 */
   color:var(--text);           /* 선 색상 (currentColor 사용) */
   border:1px solid rgba(255,255,255,.18);
   background:rgba(255,255,255,.06);
   cursor:pointer;
 }
 .hamburger::before{
   content:"";
   position:absolute; left:50%; top:50%;
   transform:translate(-50%, -50%);
   display:block; width:20px; height:2px; border-radius:1px;
   background:currentColor;
   /* 3줄: 가운데 + 위/아래 */
   box-shadow:0 -6px 0 0 currentColor, 0 6px 0 0 currentColor;
 }

/* Mobile Drawer */
@media (max-width:900px){
  .hamburger{ display:grid; }
  .site-nav{
    position:fixed;
    /* 헤더 바로 아래부터 화면 맨 아래까지 고정 높이 */
    /* 헤더 아래부터, 내용 높이만큼만 */
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: auto;
    height: auto;
    max-height: calc(100dvh - var(--header-h));
    background:rgba(10,10,11,.40); /* 블러는 드로어에서 처리 */
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.06);
    transform:translateY(-140%);
    transition:transform .3s ease;
    flex-direction:column;
    overflow-y:auto;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .site-nav .menu{ flex-direction:column; align-items:stretch; padding:.6rem; gap:.6rem; }
  .site-nav .menu > li > a, .site-nav .nav-right a, .dropdown-toggle{padding:.9rem 1rem; border-radius:12px; }
  /* ✅ 모바일: 데스크톱용 Assets 버튼/패널은 끄고, 드로어 내부 아코디언만 사용 */
  .nav-assets-toggle--desktop,
  .nav-product-toggle--desktop{
    display:none !important;
  }

  .assets-details--mobile,
  .product-details--mobile{
    display:block;
  }

  #assets-panel,
  #product-panel{
    display:none !important;
  }

  /* 모바일 summary를 기존 메뉴 아이템처럼 */
  .assets-summary{
    padding:.9rem 1rem;
    border-radius:12px;
  }
  .assets-summary:hover{ background:rgba(255,255,255,.06); }

  .dropdown-menu{ position:static; display:block; background:transparent; border:0; box-shadow:none; padding-left:.6rem; }
  .dropdown-menu a{ padding-left:1.2rem; }
  /* nav-toggle 체크되면 햄버거 스타일 변경 + 드로어 내려오기 */
  .nav-toggle:checked + .hamburger{
    border-color:rgba(255,255,255,.8);
    background:rgba(255,255,255,.12);
  }
  .nav-toggle:checked ~ .site-nav{
    transform:translateY(0);
  }

  .site-header .nav-center{ width:100%; }
  .site-header .nav-right{
    width:100%;
    padding:.6rem .6rem 0;
    gap:.6rem;
    border-top:1px solid rgba(255,255,255,.08);
    /* 모바일에서는 위→아래로 쌓기 */
    flex-direction:column;
    align-items:stretch;
    white-space: normal;
  }
  .site-header .nav-right a{ padding:.9rem 1rem; border-radius:12px; }
  /* 모바일: 유저 메뉴는 드로어 폭 100% 차지 */
  .user-menu{
    width:100%;
    margin-bottom:0;
  }
 
}

/* --------- Hero --------- */
.hero{
  position:relative;
  padding:0; 
  overflow:hidden;                 /* 모바일 크롭 대비 */
  display:grid;                    /* 콘텐츠 수직/수평 배치 제어 */
  /* 중앙정렬은 아이템 기준으로만(가로) */
  justify-items:center;
}
/* 히어로 텍스트 블록을 진짜 중앙으로 */
.hero .hero-inner{
  margin-inline:auto;
  text-align:center;
  padding-inline:clamp(16px, 4vw, 28px);
}


/* ▼ 검정 오버레이: 초기엔 1, is-in일 때 0으로 transition */
.hero{
  --overlay-dur: 2.5s;      /* 페이드 길이 */
  --overlay-delay: .75s;    /* 시작 지연 (Pixelarity와 유사) */
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:#000;
  opacity:1;
  transition: opacity var(--overlay-dur) ease-in-out var(--overlay-delay);
  z-index:1;               /* 이미지(.hero-bg, z-index:0) 위, 텍스트(z-index:2) 아래 */
  pointer-events:none;

}
.hero.is-in::after{ opacity:0; }  /* IO가 is-in 붙이면 서서히 밝아짐 */

/* 실제 이미지 엘리먼트 */
.hero .hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-position:center;
  object-fit: cover;      /* 기본(데스크톱): 전체 보이기 */
  z-index:0;
  opacity: 0;           /* 초기엔 검정 배경만 보이게 */
  will-change: opacity;
  /* 합성 레이어 고정(크로스페이드 울렁임 방지) */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hero-inner{ position:relative; z-index:2; max-width:780px; }

/* 데스크톱(>=901px): 가로 기준으로 이미지 전체 노출(크롭 없음) */
@media (min-width: 901px){
  .hero{
    aspect-ratio: var(--hero-ratio, 18/9); /* 이미지 비율에 맞춰 높이 안정화 */
    min-height: 520px;                      /* 너무 납작해지지 않게 가드 */
    /* 필요하면 다음 줄로 초과 높이 제한 가능: max-height: 88vh; */
  }

}

/* 모바일(<=900px): 세로를 꽉 채우고 좌우는 잘라냄(시원한 풀블리드) */
@media (max-width: 900px){
  .hero{
    aspect-ratio: auto;
    min-height: 100svh;        /* 안정적(주소창 변화에도 덜 흔들림) */
        
  }
  .hero .hero-bg{ object-fit: cover; }
}

/* === 모던 등장 애니메이션 (위로 슬라이드 + 페이드) === */
@media (prefers-reduced-motion: no-preference){
  @keyframes hero-rise {
    from { opacity:0; transform: translateY(28px) scale(.98); filter: blur(2px); }
    to   { opacity:1; transform: none;               filter: blur(0); }
  }
  /* 트리거 클래스가 붙었을 때만 애니메이션 적용 → FOUC 방지 */
  .hero[data-anim="rise"].is-in .hero-inner > *{
    animation: hero-rise .72s cubic-bezier(.22,1,.36,1) both;
  }
  /* 살짝 스태거(제목 → 문장 → 버튼) */
  .hero[data-anim="rise"].is-in .hero-inner > :nth-child(1){ animation-delay:.02s; }
  .hero[data-anim="rise"].is-in .hero-inner > :nth-child(2){ animation-delay:.12s; }
  .hero[data-anim="rise"].is-in .hero-inner > :nth-child(3){ animation-delay:.2s;  }



  
  /* === 센터 라인에서 상/하로 펼쳐지는 Reveal (느리게 시작→가속) === */
  .hero[data-anim="slice"]{
    --slice-dur: 1.15s;
    --slice-ease: cubic-bezier(.45,0,1,1); /* ease-in: 초반 천천히, 점점 빨라짐 */
  }
  /* 내용 영역을 '가운데 선'에서 위/아래로 열리게 */
  .hero[data-anim="slice"].is-in .hero-inner{
    clip-path: inset(50% 0 50% 0);                 /* 높이 0(가운데 라인만) */
    animation: clip-reveal-center var(--slice-dur) var(--slice-ease) forwards;
    will-change: clip-path, opacity, filter;
  }
  
  @keyframes clip-reveal-center{
    0%   { clip-path: inset(50% 0 50% 0); opacity:0; filter:blur(2px); }
    20%  { opacity:1; }
    100% { clip-path: inset(0 0 0 0);     opacity:1; filter:blur(0); }
  }
  /* === Hero 배경 크로스페이드 (CSS-only) === */
  @keyframes hero-bg-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes hero-bg-fade-out { to { opacity: 0; } }


  /* === 1→2 크로스페이드 (2번 이미지 있을 때) === */
  .hero.is-in:not(.hero--single) .hero-bg.bg1{
    animation:
      hero-bg-fade-in var(--hero-in, 3s) ease-out var(--hero-in-delay, .15s) forwards,
      hero-bg-fade-out var(--hero-xdur, 1s) ease-in var(--hero-swap, 4s) forwards;
  }
  .hero.is-in:not(.hero--single) .hero-bg.bg2{
    animation: hero-bg-fade-in var(--hero-xdur, 1s) ease-in var(--hero-swap, 4s) forwards;
  }

  /* === 폴백: 2번 없음 → 1번만 3초 페이드인 === */
  .hero.is-in.hero--single .hero-bg.bg1{
    animation: hero-bg-fade-in var(--hero-in, 3s) ease-out var(--hero-in-delay, .15s) forwards;
  }
  .hero.is-in.hero--single .hero-bg.bg2{
    animation: none !important;
    display: none;
  }
} /* End of @media (prefers-reduced-motion: no-preference) */

/* 접근성: 모션 감소일 때 애니메이션 비활성화 */
@media (prefers-reduced-motion: reduce){
  .hero[data-anim="slice"] .hero-inner,
  .hero[data-anim="rise"]  .hero-inner > *{
    animation: none !important;
    clip-path: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  .hero[data-anim="slice"]::after{ content:none !important; }
  .hero .hero-bg{ animation:none !important; opacity:0 !important; }
  .hero .hero-bg.bg1{ opacity:1 !important; }

}

.hero h1{ font-size:clamp(2.6rem, 6vw, 5rem); line-height:1.15; margin:0 0 12px; font-weight:900; letter-spacing:.5px; }
.hero p{ color:var(--text-dim); margin:0 0 24px; }
.cta-group{ display:flex; gap:.8rem; flex-wrap:wrap; }

/* Buttons */
.btn{
  display:inline-block;
  padding: var(--btn-py, .8rem) var(--btn-px, 1.1rem);
  line-height: var(--btn-lh, 1.1);
  border-radius: var(--btn-radius, 12px);
  border:1px solid rgba(255,255,255,.16);
}
.btn-tight{
  --btn-py: .55rem;  /* ✅ 여기만 줄이면 상하 여백 줄어듦 */
  --btn-lh: 1.05;    /* ✅ 글자 줄높이도 같이 줄이면 더 컴팩트 */
}
.btn.primary{
  background:linear-gradient(135deg, #e6e6e6, #bfbfbf);
  color:#0b0b0c; font-weight:700;
}
.btn.primary:hover, .btn.primary:focus{
  background:linear-gradient(135deg, #f0f0f0, #c9c9c9);
  text-decoration:none;
}
.btn.primary:active{ background:linear-gradient(135deg, #d9d9d9, #adadad); }
.btn.primary:disabled{ opacity:.6; cursor:not-allowed; }
.btn.ghost{ background:rgba(255,255,255,.04); color:var(--text); }
/* 버튼형 링크는 전역 hover 밑줄 제거 */
.btn:hover, .nav-cta:hover{ text-decoration:none; }


/* 앵커 점프 시 헤더에 가려지지 않게 */
/* 앵커 점프 시 헤더에 가려지지 않게 (섹션만 적용) */
:where(section){ scroll-margin-top:calc(var(--header-h) + 8px); }

/* 홈 히어로(#home)는 보정 제외 → 최상단에 딱 붙게 */
body[data-page="home"] #home{ scroll-margin-top:0; }
/* 비-홈 페이지에서 상단 여백 필요할 때 */
body:not([data-page="home"]):not([data-page="admin"]) #main {
  padding-top: var(--header-h);
}
/* 홈(index) 전용: body에 home-page id가 있으면 상단 패딩 제거 */
body[data-page="home"] #main{
  padding-top: 0;
}
/* --------- Auth (Login/Signup 공통) --------- */
/* 섹션을 헤더 바로 아래서 시작 */
.auth-section{
  padding: 0;                    /* 헤더 오프셋은 #main이 담당 */
  min-height: 0;
  display: block;
}

/* 2-Column Layout */
.auth-wrap{
  width:100vw; margin:0;
  padding-left:0;
  padding-right:max((100vw - 1400px)/2, 1rem);
  display:grid; grid-template-columns:1.35fr 1fr; gap:1.2rem; align-items:start; min-height:auto;
}
.auth-visual{
  border-radius:var(--radius);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
  min-height:0; height:auto; position:relative; overflow:hidden;
}
.section-darker{
  background: #0a0a0b; /* 지금 너가 변수로 쓰는 --muted랑 같은 톤 */
}
/* 이미지 채우기 */
.auth-visual > img{
  position:static; inset:0; width:100%; height:auto; object-fit:cover; display:block; border-radius:inherit;
}
/* 이미지 없을 때 플레이스홀더 */
.auth-visual::before{
  content:""; display:block; aspect-ratio:16/9; border-radius:inherit;
  background:#fff; box-shadow:0 10px 40px rgba(0,0,0,.35);
}
.auth-visual:has(img)::before{ content:none; } /* 크롬/사파리 */
.auth-visual.has-img::before{ content:none; }  /* Firefox 대안 */

.auth-panel{
  align-self:start;
  max-width:520px;
  margin-left:auto;
  justify-self:center;
  margin-right:auto;
  --shift:8px;
  transform:translateX(calc(-1 * var(--shift)));
}

/* 반응형 */
@media (max-width:1024px){
  .auth-wrap{
    grid-template-columns:1fr;
    width:100%;
    padding-inline:1rem;
    min-height:auto;
  }
  .auth-panel{ order:-1; max-width:620px; margin-inline:auto; transform:none; }
  .auth-visual{ min-height:280px; height:auto; }
}
@media (min-width:1200px){
  body:is([data-page="login"], [data-page="signup"], [data-page="admin"]) .auth-panel{
    width:50%; max-width:none; justify-self:center;
  }
}

/* ===== Login/Signup 공통 폼 ===== */
:is(body[data-page="login"], body[data-page="signup"], body[data-page="admin"]) .auth-form.card{
  background:transparent; border:0; box-shadow:none; padding:0;
  transform:none; transition:none;
}
:is(body[data-page="login"], body[data-page="signup"], body[data-page="admin"]) .auth-form .input{
  width:100%;
  background:transparent; border:0; border-radius:0; color:var(--text);
  padding:.75rem 0; border-bottom:1px solid rgba(255,255,255,.22); outline:none;
}
/* hover/focus 시 밑줄만 강조 (center-out) */
:is(body[data-page="login"], body[data-page="signup"], body[data-page="admin"]) .auth-form .form-row{ position:relative; }
:is(body[data-page="login"], body[data-page="signup"], body[data-page="admin"]) .auth-form .form-row::after{
  content:""; position:absolute; left:50%; bottom:-1px; width:100%; height:2px;
  background:var(--text); transform:translateX(-50%) scaleX(0);
  transform-origin:50% 50%; transition:transform .28s ease; pointer-events:none;
}
 :is(body[data-page="login"], body[data-page="signup"], body[data-page="admin"]) .auth-form .form-row:hover::after,
 :is(body[data-page="login"], body[data-page="signup"], body[data-page="admin"]) .auth-form .form-row:focus-within::after{
  transform:translateX(-50%) scaleX(1);
}
@media (prefers-reduced-motion:reduce){
  :is(body[data-page="login"], body[data-page="signup"], body[data-page="admin"])
  .auth-form .form-row::after{ transition:none; }
}
:is(body[data-page="login"], body[data-page="signup"], body[data-page="admin"]) .auth-form .input::placeholder{ color:var(--text-dim); }

/* 크롬/사파리 자동완성 배경 제거 */
:is(body[data-page="login"], body[data-page="signup"], body[data-page="admin"]) .auth-form input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color:var(--text) !important;
  caret-color:var(--text);
  transition: background-color 9999s ease-out 0s;
}

:is(body[data-page="login"], body[data-page="signup"], body[data-page="admin"]) .auth-form .form-row + .form-row{ margin-top:.9rem; }
:is(body[data-page="login"], body[data-page="signup"], body[data-page="admin"]) .auth-form .btn.block{ display:block; width:100%; text-align:center; }
:is(body[data-page="login"], body[data-page="signup"], body[data-page="admin"]) .auth-form .form-actions{
  margin-top:.6rem; display:flex; align-items:center; justify-content:space-between;
}

/* 에러/메시지 pill */
body[data-page="login"] #login-error,
#login-msg, #signup-msg{
  background:transparent; border:1px solid rgba(255,255,255,.18); color:var(--text); margin-top:.8rem;
}

/* 로그인 전용 디테일 */
:is(body[data-page="login"], body[data-page="signup"], body[data-page="admin"]) .auth-panel .lede{
  font-weight:700;
  color:var(--text);
  margin-bottom:clamp(24px, 6vh, 80px);
}
/* 데스크톱에서 폼 스케일 업 가능 */
:is(body[data-page="login"], body[data-page="signup"], body[data-page="admin"]) .auth-panel .auth-scale{
  --auth-scale:1.18;
  transform:scale(var(--auth-scale));
  transform-origin:top left;
  width:calc(100% / var(--auth-scale));
}
/* 로그인 버튼 간격 */
:is(body[data-page="login"], body[data-page="admin"]) .auth-form .btn.block{ margin-top:clamp(24px, 4vh, 56px); }

/* Sign-up 유도 버튼(로그인 페이지) */
body[data-page="login"] .sign-up{
  display:block; width:100%; margin-top:.9rem; text-align:center;
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.16);
  text-decoration:none; transition:background .25s ease;
}
body[data-page="login"] .sign-up::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(220,220,220,.22) 50%, rgba(255,255,255,0) 100%);
  transform:translateY(-120%); transition:transform .6s ease; pointer-events:none;
}
body[data-page="login"] .sign-up:hover::before,
body[data-page="login"] .sign-up:focus-visible::before{ transform:translateY(120%); }
body[data-page="login"] .sign-up:hover,
body[data-page="login"] .sign-up:focus-visible{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  text-decoration:none;
}



/* --- Auth links (login & signup): 기본은 텍스트, hover/활성/해당 페이지에서만 버튼 스타일 --- */
.site-header .nav-right .login-link,
.site-header .nav-right .signup-link{
  display:inline-flex; align-items:center;
  padding:.6rem .9rem;
  border-radius:999px;
  border:1px solid transparent;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.site-header .nav-right .login-link:hover,
.site-header .nav-right .login-link:focus-visible,
.site-header .nav-right .signup-link:hover,
.site-header .nav-right .signup-link:focus-visible{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.16);
  text-decoration:none;
}

/* 현재 페이지가 login/signup 이거나 aria-current="page"면 항상 버튼 모양 */
body[data-page="login"]  .site-header .nav-right .login-link,
.site-header .nav-right .login-link[aria-current="page"],
body[data-page="signup"] .site-header .nav-right .signup-link,
.site-header .nav-right .signup-link[aria-current="page"]{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.16);
}

/* GIS 버튼 위/아래에 쓰는 구분선 */
.oauth-or{
  display:flex; align-items:center; gap:.6rem;
  color:var(--text-dim); font-size:.9rem; margin: .9rem 0 1rem;
}
.oauth-or::before, .oauth-or::after{
  content:""; flex:1 1 auto; height:1px; background:rgba(255,255,255,.18);
}
.oauth-or > span{ line-height:1; }

/* ✅ 공식 Google 버튼 컨테이너 */
.google-btn-wrap{
  display:flex;
  justify-content:center;
  margin:.4rem 0 .9rem;
  width:100%;
  max-width:420px;            /* 버튼이 너무 길어지지 않게 상한선 */
  padding-inline:12px;        /* 초소형 화면에서 좌우 여백 */
  margin-left:auto; margin-right:auto;
}

/* ───────── User menu (avatar chip + dropdown) ───────── */
.user-menu{
  position:relative;
  z-index:var(--z-user-menu);
}
.user-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .7rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04); color:var(--text);
  cursor:pointer;
}
.user-chip:focus-visible{ outline:2px solid rgba(124,92,255,.55); outline-offset:2px; }
.user-chip .avatar,
.user-chip .avatar-fallback{
  width:26px; height:26px; border-radius:50%;
  display:block;
}
.user-chip .avatar{ object-fit:cover; }
.user-chip .avatar-fallback{
  background:rgba(255,255,255,.12);
  display:grid; place-items:center;
  font-size:.78rem; font-weight:800; color:#fff;
}
.user-chip .name{
  max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.user-dropdown{
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:260px; z-index:1;
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px; box-shadow:var(--shadow);
  padding:.5rem; display:none;
  /* fix: 부모(.nav-right)의 nowrap 상속 차단 + 폭 상한 + 긴 토큰 줄바꿈 */
  white-space: normal;
  max-width: min(92vw, 360px);
  overflow-wrap: anywhere;
}
.user-menu[data-open="1"] .user-dropdown{ display:block; }
.user-dropdown .meta{
  padding:.25rem .5rem .5rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:.35rem;
}
.user-dropdown .meta .n{ display:block; font-weight:700; }
.user-dropdown .meta .e{
  display:block;
  color:var(--text-dim);
  font-size:.85rem;
  /* 긴 이메일 한 줄 유지하되 컨테이너 밖으로는 안 나가게 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.user-dropdown .sub-meta{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:0;
  margin:.25rem 0 .5rem;
  min-width:0;
}
.user-dropdown .sub-meta.plan-row{
  width:100%;
  padding:.5rem .6rem;
  border-radius:8px;
  gap:.5rem;
  margin:.15rem 0 .35rem;
  box-sizing:border-box;
}

.user-dropdown .plan-label{
  color:var(--text-dim);
  font:inherit;
  font-weight:700;
  min-width:36px;
}

.user-dropdown .sub-meta .e{
  display:none;
}
.user-dropdown a,
.user-dropdown button{
  display:block; width:100%; text-align:left;
  padding:.5rem .6rem; border-radius:8px;
  background:transparent; border:0; color:var(--text); cursor:pointer;
}
.user-dropdown a:hover,
.user-dropdown button:hover{ background:rgba(255,255,255,.06); }
.user-dropdown hr{
  height:1px; border:0; background:rgba(255,255,255,.08);
  margin:.35rem 0;
}
.user-dropdown .sub-meta .pill{
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
  min-width: auto;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding:.28rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  user-select: none;
  overflow: hidden;
  text-transform: uppercase;
  font-size: .68rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) padding-box,
    linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,211,167,.95), rgba(255,255,255,.55)) border-box;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 10px 24px rgba(0,0,0,.22);

}

.user-dropdown .sub-meta .pill::before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  pointer-events: none;
}

.user-dropdown .sub-meta .pill[data-plan="free"]{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) padding-box,
    linear-gradient(135deg, rgba(148,163,184,.95), rgba(226,232,240,.85), rgba(255,255,255,.55)) border-box;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 10px 24px rgba(0,0,0,.18);
}

.user-dropdown .sub-meta .pill[data-plan="pro"]{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) padding-box,
    linear-gradient(135deg, rgba(45,107,255,.95), rgba(0,211,167,.95), rgba(180,255,236,.7)) border-box;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 10px 24px rgba(0,0,0,.22),
    0 0 18px rgba(45,107,255,.18);
}

.user-dropdown .sub-meta .pill[data-plan="premium"]{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) padding-box,
    linear-gradient(135deg, rgba(255,215,0,.95), rgba(255,140,0,.95), rgba(255,255,255,.72)) border-box;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 12px 28px rgba(0,0,0,.26),
    0 0 22px rgba(255,180,0,.22);
}
/* ─────────────────────────────────────────────
   Admin(진짜 관리자) 전용 콤팩트 모드
   - 헤더는 줄바꿈 금지 유지
   - 컨텐츠/컨트롤 크기, 패딩, 열폭을 축소
   ───────────────────────────────────────────── */
body[data-page="admin"].is-admin #admin-panel{
  --adm-fs: .94rem;
  --adm-pad-y: .55rem;
  --adm-pad-x: .7rem;
}
body[data-page="admin"].is-admin #admin-panel .card{
  padding: var(--adm-pad-y) var(--adm-pad-x);
}
body[data-page="admin"] #subs-table .pill{
  font-size:.72rem;
  padding:.22rem .45rem;
}
body[data-page="admin"].is-admin #subs-table{
  font-size: var(--adm-fs);
  table-layout: fixed;                 /* 열폭 고정 계산 */
}
/* 헤더는 줄바꿈 금지 유지 + 폭 넘치면 말줄임 */
body[data-page="admin"].is-admin #subs-table thead th{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 셀 패딩/행 높이 축소 */
/* ✅ 셀 좌우 여백을 줄여 타이트하게 */
body[data-page="admin"] #subs-table th,
body[data-page="admin"] #subs-table td{
  padding:.32rem .48rem;
  line-height:1.25;
}
/* ✅ 헤더 아래 보더 추가해서 ‘틈’ 느낌 제거 */
body[data-page="admin"] #subs-table thead th{ border-bottom:1px solid #e5e7eb; }
/* 유저 셀은 본문만 줄바꿈 허용(헤더는 그대로 nowrap) */
body[data-page="admin"].is-admin #subs-table .cell-user .display-name,
body[data-page="admin"].is-admin #subs-table .cell-user .email{
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
/* 컨트롤 크기 축소: select/버튼이 열폭을 끌고 나가지 않게 */
body[data-page="admin"].is-admin #subs-table .add-months{
  width: 100%;
  min-width: 0;
  max-width: 110px;                    /* 핵심: 상한 */
  font-size: .85rem;
  height: 32px;
  padding: .25rem .5rem;
}
body[data-page="admin"].is-admin #subs-table .actions .btn{
  font-size: .85rem;
  padding: .36rem .56rem;
  line-height: 1;
  white-space: nowrap;
  min-width: auto;
}
/* 액션/추가 열은 최소화 */
/* 열 폭은 nth-child가 아니라 클래스 기반으로만 지정 (Code 열 추가해도 안전) */
body[data-page="admin"].is-admin #subs-table col.col-add{     width: 110px !important; }
body[data-page="admin"].is-admin #subs-table col.col-actions{ width: 84px  !important; }
/* 데스크톱 기본 폭(필요 시 조정) */
body[data-page="admin"] #subs-table col.col-user   { width:280px; }
body[data-page="admin"] #subs-table col.col-status { width:100px; }
body[data-page="admin"] #subs-table col.col-code   { width:96px; }
body[data-page="admin"] #subs-table col.col-plan   { width:140px; }
body[data-page="admin"] #subs-table col.col-end    { width:140px; }
body[data-page="admin"] #subs-table col.col-last   { width:140px; }

@media (max-width: 780px){
  body[data-page="admin"]{ --page-pad: 6px; } /* ← 한 줄로 해결 */


  /* 카드도 화면과 맞닿게(선택) */
  body[data-page="admin"] .card,
  body[data-page="admin"] .card.admin-scale{ border-radius: 0; }
}

/* (선택) 노치 안전영역 보호: pad가 0이어도 안전영역은 유지 */
@supports (padding: max(0px)) {
  .container{
    padding-left: max(var(--page-pad, 1rem), env(safe-area-inset-left));
    padding-right: max(var(--page-pad, 1rem), env(safe-area-inset-right));
  }
}
/* === Admin table: fit-to-container on mobile ============================= */
@media (max-width:780px){
  /* 래퍼 안에서만 가로 스크롤(최후 수단) */
  body[data-page="admin"] .table-responsive{ width:100%; }

  /* 모바일: 내용에 맞춰 비율 재계산 */
  body[data-page="admin"] #subs-table{
    table-layout: auto !important;
    width:100%;
  }
  body[data-page="admin"] #subs-table th,
  body[data-page="admin"] #subs-table td{
    padding:.45rem .5rem !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  } 
  body[data-page="admin"] #subs-table .cell-user .display-name,
  body[data-page="admin"] #subs-table .cell-user .email{
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-overflow:clip;
  }

  /* ✅ is-admin 붙기 전(초기 상태)에도 픽셀 고정폭 무력화 */
  body[data-page="admin"]:not(.is-admin) #subs-table col{
    width:auto !important;
  }
  body[data-page="admin"] #subs-table thead th,
  body[data-page="admin"] #subs-table tbody td{ display:table-cell; }
  body[data-page="admin"] #subs-table{ min-width: 900px; } /* 필요하면 820~980px */


  /* ─ Editable(Admin) 뷰: 모바일은 퍼센트/픽셀 강제X, 자동 폭 */
  body[data-page="admin"].is-admin #subs-table col{ width:auto !important; }

  /* 컨트롤도 더 콤팩트 */
  body[data-page="admin"].is-admin #subs-table .add-months{ max-width:72px; }
  body[data-page="admin"].is-admin #subs-table .actions .btn{ padding:.3rem .5rem; font-size:.8rem; }
}



/* Subadmin(읽기전용): Add/Actions가 JS로 제거되므로 열 구성이 달라짐
   → 모바일 때 퍼센트 폭 별도 지정 */
@media (max-width:780px){
  body[data-page="admin"].is-subadmin #subs-table col.col-user   { width:auto !important; }
  body[data-page="admin"].is-subadmin #subs-table col.col-status { width:auto !important; }
  body[data-page="admin"].is-subadmin #subs-table col.col-plan   { width:auto !important; }
  body[data-page="admin"].is-subadmin #subs-table col.col-end    { width:auto !important; }
}
@media (max-width:780px){
  body[data-page="admin"] .container{
    padding-inline: var(--page-pad, 6px) !important;
  }
}

/* Admin page resets (moved from admin.html) */
body[data-page="admin"] .site-header{ display:none !important; }
body[data-page="admin"]{ --header-h:0px; }

/* Admin table: base & separators (moved from admin.html) */
body[data-page="admin"] #subs-table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  table-layout:fixed; /* ✅ 항상 고정 레이아웃(모바일 포함) → 헤더/바디 열폭 정확히 일치 */
}

body[data-page="admin"] .table-responsive{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
/* Row separators */
body[data-page="admin"] #subs-table tbody tr td{ border-bottom:1px solid #e5e7eb; }
body[data-page="admin"] #subs-table tbody tr:last-child td{ border-bottom:0; }

body[data-page="admin"] #stats-card .stats{
  grid-template-columns: repeat(4, 1fr);
  min-width:0; /* ✅ 그리드 아이템이 강제로 늘어나 바깥으로 밀려나는 것 방지 */
}
/* ✅ 반응형: 뷰포트가 줄면 4 → 2 → 1칸으로 접기 */
@media (max-width: 900px){
  body[data-page="admin"] #stats-card .stats{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 460px){
  body[data-page="admin"] #stats-card .stats{
    grid-template-columns: 1fr;
  }
}

/* === 1/3 지점 배치 프리셋 === */
.hero--third{
  /* 헤더만큼 안전거리 + 살짝 여백 */
  --hero-top-gap: calc(var(--header-h) + 12px);
  --hero-raise: 9rem;
  /*  (top gap)  |  1/3   |  2/3  */
  grid-template-rows: var(--hero-top-gap) 1fr 2fr;
  place-content: normal;   /* 기본 중앙 정렬 해제 → 위 행들 사용 */
}
.hero--third .hero-inner{
  grid-row: 2;             /* 두 번째(= 1fr) 행에 배치 */
  align-self: end;         /* 그 행의 '아래쪽' 가장자리 → 정확히 1/3 라인 */
  justify-self: center;    /* 수평 중앙 고정 */
  transform: translateY(var(--hero-raise, 0)); /* 미세조정용(선택) */
}

/* ✅ HOME: 이미지는 그대로 top까지 깔고, 텍스트만 "예전처럼 확" 아래로 */
body[data-page="home"] .hero--third{
  --hero-top-gap: calc(var(--header-h) + 12px);
  --hero-raise: 9rem; /* ← 예전 느낌(확 내려감). 필요하면 7~11rem 사이로 조절 */
  grid-template-rows: var(--hero-top-gap) 1fr 2fr;
}
body[data-page="home"] .hero--third .hero-inner{
  padding-top: 0; /* 중복 보정 제거 */
}
.cta-group{ justify-content:center; }

/* ▼ 모바일에서는 텍스트를 3번째 행으로 내려 위치 안정화 */
@media (max-width: 900px){
  .hero--third{
    /* 아래쪽에 더 비중 주기 */
    grid-template-rows: calc(var(--header-h) + 8px) .8fr 2.2fr;
  }
  .hero--third .hero-inner{
    grid-row: 3;           /* 3행(아래 구간)으로 이동 */
    align-self: start;
    transform: translateY(.5rem); /* 살짝 더 아래로 */
  }
  /* ✅ HOME mobile: 텍스트를 아래(3행)로 유지 + 살짝 더 내리기 */
  body[data-page="home"] .hero--third{
    grid-template-rows: calc(var(--header-h) + 8px) .8fr 2.2fr;
  }
  body[data-page="home"] .hero--third .hero-inner{
    padding-top: 0;
    transform: translateY(.5rem);
  }

}

@media (max-width:900px){
  body:has(.nav-toggle:checked)::before{ content:none; }

  /* 드로어 내용은 오버레이 위에 올라오도록 */
  .site-nav{ z-index:1001; }
}


/* === Mobile: user-dropdown full-width inside drawer ===================== */
@media (max-width:900px){
  /* 드롭다운을 절대배치 → 흐름 배치로 전환해서 폭 100% */
  .site-header .nav-right .user-menu[data-open="1"] .user-dropdown{
    position: static;      /* absolute -> static */
   
    width: 100%;
    min-width: 0;
    margin-top: .5rem;     /* 칩과 간격 */
    padding-inline: 1rem;  /* 좌우 숨쉬기(원하면 조절) */
    border-radius: 12px;   /* 드로어 안이라 둥글게 유지 */
  }


}
/* Hero 중앙 서브텍스트(START TATTOO SIMULATION) 전용 크기/스타일 */
.hero .hero-tagline{
  font-size: clamp(1.2rem, 2.4vw, 1.8rem); /* 기본보다 확실히 크게 */
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* bg2 video behaves like bg images */
.hero video.hero-bg{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;  
}


.pricing-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  margin-top: 1.25rem;
}

.pricing-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  overflow: hidden; 
}

.pricing-card .price{
  font-size: 1.75rem;
  margin: .25rem 0 .5rem;
}

.pricing-card .price span{
  font-size: 1rem;
  opacity: .8;
  margin-left: .25rem;
}

.pricing-list{
  margin: 0 0 1rem;

  line-height: 1.8;
  opacity: .95;
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: .55rem;
  justify-items: center;
}

.pricing-list li{
  position: relative;
  padding-left: 1.2rem;
}
.pricing-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:.05rem;
  color:var(--brand-2);
  font-weight:900;
}

/* 카드 높이가 달라도 버튼은 항상 아래쪽으로 */
.pricing-card .btn.block{
  margin-top: auto;
  width: 100%;
}
.pricing-card.featured{
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  transform: translateY(-2px);
}

.pricing-badge{
  position: static;              /* ✅ absolute 제거 */
  align-self: stretch;    
  margin: -1.25rem -1.25rem 1rem; /* ✅ 카드 padding(1.25rem)만큼 양옆/위로 당겨서 꽉 채움 */
  padding: .7rem 1rem;
  border-radius: 20px 20px 0 0;  /* 카드 radius(20px)와 맞춤 */
  background: rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.12);

  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}

.save{
  margin: 0 0 .75rem;
  opacity: .85;
}

@media (max-width: 860px){
  .pricing-grid{ grid-template-columns: 1fr; }
}
/* 공용: sweep 애니메이션(로그인 sign-up 버튼과 동일한 효과) */
.btn-sweep{
  position:relative;
  overflow:hidden;
}
.btn-sweep::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(220,220,220,.22) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:translateY(-120%);
  transition:transform .6s ease;
  pointer-events:none;
}
.btn-sweep:hover::before,
.btn-sweep:focus-visible::before{
  transform:translateY(120%);
}
/* === Split sections (simulate + second-section + third-section) ======== */

/* 2컬럼 유지(모바일 포함) */
:is(#simulate, #second-section, #third-section, #fourth-section, #about-section-1, #about-section-2) .grid-2{
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 1.25rem;
}

/* 전역 @media(max-width:900px) .grid-2{1fr} 덮어쓰기(세 섹션 모두) */
@media (max-width: 900px){
  :is(#simulate, #second-section, #third-section, #fourth-section, #about-section-1, #about-section-2) .grid-2{

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .75rem;
  }
}

/* 제목(셋 다) 크게 */
@media (min-width: 901px){
  :is(#simulate, #second-section, #third-section, #fourth-section) :is(.sim-title, .second-title, .third-title, .fourth-title){
    font-size: clamp(2rem, 2.4vw, 3rem);
    line-height: 1.05;
    margin: 0 0 .9rem;
    letter-spacing: .02em;
  }
}

/* 모바일 제목 크기 */
@media (max-width: 900px){
  :is(#simulate, #second-section, #third-section, #fourth-section) :is(.sim-title, .second-title, .third-title, .fourth-title){
    font-size: clamp(1.05rem, 3.8vw, 1.4rem);
    line-height: 1.15;
    margin: 0 0 .6rem;
  }
  :root{ --lede-size: .9rem; }  /* 더 줄이고 싶으면 .85rem */
}

/* === Filled blue rectangular button =================================== */
.btn.btn-blue{
  background:#2d6bff;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  text-decoration:none;

  /* ✅ 컴팩트(전역 .btn padding 덮어쓰기) */
  padding:.6rem .85rem;
  font-size:.92rem;
  line-height:1.1;
}

.btn.btn-blue:hover,
.btn.btn-blue:focus-visible{
  background: #3a78ff;
  border-color: rgba(255,255,255,.26);
}

.btn.btn-blue:active{
  background: #245de0;
}

/* 작은 사이즈 필요하면(너가 쓰던 btn-small 대체/보강) */
.btn.btn-small{
  /* ✅ blue/ghost 모두에서 "진짜 small"로 쓰고 싶을 때 */
  padding:.48rem .72rem;
  font-size:.86rem;
  line-height:1.1;
  border-radius:10px;
}
/* ───────── Assets full-width dropdown panel ───────── */
.assets-panel{
  position: fixed;
  left: 0;
  right: 0;
  padding: 0 !important;          /* 기존 스타일에 padding 있으면 제거 */
  display: flex; 
  /* 항상 "헤더 바로 아래"에서 시작 */
  top: var(--header-h);

  /* 닫혀 있을 땐 접힌 상태 */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  isolation: isolate;

  background: transparent;
  border-bottom: 0;
  box-sizing: border-box;
  padding: 0 max(1rem, var(--page-pad, 1rem)); /* 닫힐 때는 위아래 패딩 0 */

  display: flex;
  align-items: center;

  z-index: var(--z-assets-panel);/* 헤더보다 아래, 컨텐츠보다 위 */
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  transition:
    max-height .26s ease,
    opacity .2s ease,
    padding-top .2s ease,
    padding-bottom .2s ease;
}
.assets-panel::before{
  content:"";
  position:absolute;
  inset:0;
  /* ✅ 완전 투명(transparent)은 iOS에서 blur가 안 보일 때가 있어요.
     거의 0에 가까운 알파로 “블러 트리거”만 걸어줌 */
  background: rgba(255,255,255,.001);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  pointer-events:none;
  z-index:-1;
}


/* 열렸을 때: 아래로 펼쳐지기만 함 (헤더 위로는 절대 안 올라감) */
.assets-panel.is-open{
  max-height: 260px;                    /* 필요하면 원하는 높이로 조절 */
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.product-panel.is-open{
  max-height: 420px;
}
/* hidden 속성이 있으면 완전히 숨기기 */
[hidden]{ display:none !important; }

.nav-assets-toggle,
.nav-product-toggle{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  line-height: 1; /* 베이스라인 흔들림 줄이기(중요) */
}

.nav-assets-toggle::after,
.nav-product-toggle::after{
  content:"";
  width:.55rem;
  height:.55rem;
  display:inline-block;
  box-sizing:border-box;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;

  /* 기본: 아래(v) — 살짝 내려서 가운데 맞춤 */
  transform: translateY(-1px) rotate(45deg);
  transform-origin:center;
  opacity:.9;
}

.nav-assets-toggle[data-dir="up"]::after,
.nav-product-toggle[data-dir="up"]::after{
  /* 열림: 위(∧) — 살짝 올려서 가운데 맞춤 */
  transform: translateY(3px) rotate(-135deg);
}



/* ✅ 내부 래퍼가 패널 높이를 꽉 채우게 */
.assets-panel-inner{
  padding: 0;
  flex: 1;                         /* 패널 높이/폭을 상속 */
  display: flex;
  justify-content: center;
  align-items: stretch;            /* ✅ 위~아래로 늘림 */
}

/* ✅ 선/박스 영역도 패널 높이에 맞춰 늘림 */
.assets-actions{
  --line: rgba(255,255,255,.22);
  --line-w: 1px;

  display: flex;
  width: min(520px, 92vw);
  height: 100%;                    /* ✅ 패널 높이 끝까지 */
  min-height: 140px;

  border-left: var(--line-w) solid var(--line);
  border-right: var(--line-w) solid var(--line);
}

.assets-divider{
  width: var(--line-w);
  background: var(--line);
  align-self: stretch;
}
/* ✅ (필수) assets-action을 50:50으로 늘려서 칸을 균등하게 */
.assets-action{
  flex: 1 1 0;              /* ← 핵심: 두 칸 동일 폭 */
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 1.25rem;       /* 좌우 숨쉬기(원하면 0.8~1.6rem 조절) */
  text-decoration: none;
  color: inherit;

  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 900;
}

.assets-action:hover{
  background: rgba(255,255,255,.06);
}

.assets-action:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* Support panel: 2 columns, each column stacked vertically */
.support-actions{
  width: min(620px, 92vw);
  min-height: 220px;

  display: grid;
  grid-template-columns: 1fr var(--line-w) 1fr;
  align-items: stretch;
}

.support-col{
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  min-width: 0;
}

.support-action{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .8rem;
  text-align: left;

  padding: .85rem 1.25rem;
  color: inherit;
  text-decoration: none;

  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 900;

  border-bottom: 1px solid rgba(255,255,255,.16);
}

.support-action:last-child{
  border-bottom: 0;
}

.support-action:hover{
  background: rgba(255,255,255,.06);
  text-decoration: none;
}


/* Dropdown panel left empty area logo */
.product-panel .assets-panel-inner,
.support-panel .assets-panel-inner{
  position: relative;
}

/* 메뉴 박스는 로고보다 위에 표시 */
.product-panel .assets-actions,
.support-panel .assets-actions{
  position: relative;
  z-index: 1;
}

/* 왼쪽 빈영역 중앙에 logo.png 표시 */
.product-panel .assets-panel-inner::before,
.support-panel .assets-panel-inner::before{
  content: "";
  position: absolute;
  top: 50%;

  /* 메뉴 박스 왼쪽 빈 공간의 중앙 */
  left: calc((100% - min(620px, 92vw)) / 4);

  width: 96px;
  height: 96px;

  background: url("../assets/logo.png") center / contain no-repeat;
  transform: translate(-50%, -50%);

  opacity: .18;
  pointer-events: none;
  z-index: 0;
}

/* Product panel: 첫 번째 칸은 세로 메뉴, 두 번째 칸은 기능 */
.product-panel .product-actions{
  width: min(620px, 92vw);
  min-height: 320px;

  /* Product 패널은 flex 대신 grid로 고정 배치 */
  display: grid;
  grid-template-columns: 1fr var(--line-w) 1fr;
  align-items: stretch;
}
.product-action-col{
  min-width: 0;
}

/* Dropdown menu title + description */
.product-sub-action,
.product-feature-action{
  flex-direction: row;
  gap: .8rem;
  text-align: left;
  align-items: center;
  justify-content: flex-start;
}

.dropdown-title{
  display: block;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.1;
}

.dropdown-desc{
  display: block;
  max-width: none;
  color: var(--text-dim);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: none;
  line-height: 1.35;
  white-space: nowrap;
}


.dropdown-icon{
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 0;
  box-shadow: none;
}

.dropdown-icon img{
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
}

.product-sub-action:hover .dropdown-icon,
.product-feature-action:hover .dropdown-icon{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border-color: rgba(255,255,255,.22);
}




/* 가운데 세로 메뉴 칸 */
.product-action-col--stack{

  display: grid;
  grid-template-rows: repeat(3, 1fr);
}

/* 오른쪽 Features 칸 */
.product-feature-action{
  align-items: center;
  justify-content: flex-start;
  justify-content: center;
  padding-top: 1.25rem;
  padding-left: 1.25rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 900;
}

.product-panel .assets-divider{
   width: var(--line-w);
  height: 100%;
  align-self: stretch;
}

.product-sub-action{
  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding: .85rem 1.25rem;
  color: inherit;
  text-decoration: none;

  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;

  border-bottom: 1px solid rgba(255,255,255,.16);
}

.product-sub-action:last-child{
  border-bottom: 0;
}

.product-sub-action:hover{
  background: rgba(255,255,255,.06);
  text-decoration: none;
}




/* ✅ index 섹션 비디오가 셀 밖으로 안 나가게 */
#simulate video,
#second-section video,
#third-section video,
#fourth-section video,
#about-section-1 video,
#about-section-2 video{
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ✅ 그리드 아이템이 내용 때문에 커지지 않게(안전장치) */
#simulate .grid-2 > *,
#second-section .grid-2 > *,
#third-section .grid-2 > *,
#fourth-section .grid-2 > *{
  min-width: 0;
}

/* === Mobile header overflow hard-fix =============================== */
@media (max-width:900px){
  /* 1) iOS 포함: clip 미지원/버그 대비해서 hidden으로 확실히 차단 */
  html, body{ overflow-x: hidden; }

  /* 2) 헤더/내부 래퍼가 뷰포트를 절대 넘지 않게 */
  .site-header{
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .site-header .header-inner{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* 3) flex 아이템이 내용 폭 때문에 안 줄어드는(min-width:auto) 문제 방지 */
  .site-header .brand,
  .site-header .site-nav,
  .site-header .nav-center,
  .site-header .nav-right{
    min-width: 0;
  }
  /* ✅ 핵심: brand(왼쪽)가 줄어들 수 있어야 햄버거가 화면 밖으로 안 밀림 */
  .site-header .brand{
    flex: 1 1 auto;              /* 남는 공간 차지 + 줄어들기 허용 */
  }
  .site-header .brand span{
    min-width: 0;                /* flex item shrink 허용 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;         /* 한 줄 유지 + … 처리 */
  }
  .hamburger{
    flex: 0 0 auto;              /* 햄버거는 고정 크기 */
  }
  /* 4) 가장 중요: 모바일에서 nav는 무조건 fixed로 빼서 헤더 폭을 밀지 못하게 */
  .site-header .site-nav{
    position: fixed !important;
    left: 0;
    right: 0;
    top: var(--header-h);
    width: 100%;
    max-width: 100vw;
  }
/* clip 지원 브라우저에서는 clip로(선택) */
@supports (overflow: clip){
  @media (max-width:900px){
    html, body{ overflow-x: clip; }
    .site-header, .site-header .header-inner{ overflow-x: clip; }
  }
}
  /* (선택) 링크/메뉴가 길어도 줄바꿈 허용 */
  .site-header .menu,
  .site-header .nav-right{
    white-space: normal !important;
  }
}


/* === About: big video under first section ============================ */


body[data-page="about"] .about-hero-video{
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;     /* ✅ 큰 화면 비율 고정 */
  height: auto;
  object-fit: cover;
  background: #000;
}


/* === About: full-width WHITE band under header ====================== */
body[data-page="about"] .about-hero-band{
  position: relative;
  overflow: hidden;

  /* ✅ natural glow gradient (monochrome) */
  background: linear-gradient(180deg, #161618 0%, #0f0f10 100%);
  color: #eaeaea;                      /* ✅ 밝은 텍스트 */
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* 섹션 내부에서 사용하는 토큰들도 밝은 배경에 맞게 재정의 */
body[data-page="about"] .about-hero-band{
  --text: #eaeaea;
  --text-dim: rgba(255,255,255,.68);
}
/* ✅ glow layer (무지개 X, 자연스러운 라이트 블룸) */
body[data-page="about"] .about-hero-band::before{
  content:"";
  position:absolute;
  inset:-180px;                 /* glow가 바깥으로 퍼질 공간 */
  pointer-events:none;
  background:
    radial-gradient(700px 420px at 50% 0%,  rgba(255,255,255,.10), transparent 60%),
    radial-gradient(520px 360px at 15% 10%, rgba(255,255,255,.06), transparent 62%),
    radial-gradient(520px 360px at 85% 12%, rgba(255,255,255,.05), transparent 62%);
  filter: blur(36px);
  opacity: .9;
}

/* ✅ glow 위로 콘텐츠가 올라오게 */
body[data-page="about"] .about-hero-band > .container{
  position: relative;
  z-index: 1;
}
body[data-page="about"] .about-hero-band .container{ text-align:center; }
body[data-page="about"] .about-hero-band .section-title{ justify-content:center; }
body[data-page="about"] .about-hero-band .section-title .bar{ display:none; }
body[data-page="about"] .about-hero-band .lede{ margin-left:auto; margin-right:auto; }


/* lede/보조 텍스트 */
body[data-page="about"] .about-hero-band .lede{
  color: var(--text-dim);
}

/* stat 카드도 밝은 톤으로 */
body[data-page="about"] .about-hero-band .stat{
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
}

/* About 섹션 패딩 살짝 줄이기(선택) */
body[data-page="about"] .about-hero-band.section{ --section-pad-y: 56px; }
body[data-page="about"] .about-video-title{
  display: block;
  width: 100%;
  text-align: center;
}
body[data-page="about"] .about-hero-video-section.section{
  padding-top: 24px;   /* 기본 72px → 24px (원하는 만큼 조절) */
}

#about-carousel .carousel{
  position: relative;
  width: min(var(--carousel-w, 1100px), 100%);
  margin: 0 auto;
}

/* ▶ 이미지 + 좌우 버튼을 한 줄로 배치 */
#about-carousel .carousel-frame{
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* 이미지 영역은 가운데, 너비 대부분 차지 */
#about-carousel .carousel-viewport{
  flex: 1 1 auto;
  overflow: hidden;

  /* 🔻 라운드/테두리/배경 제거 */
  border-radius: 0;
  border: 0;
  background: transparent;
}

/* 슬라이드/트랙은 그대로 */
#about-carousel .carousel-track{
  display: flex;
  transform: translateX(0);
  transition: transform .55s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

#about-carousel .carousel-slide{
  flex: 0 0 100%;
  margin: 0;
}

#about-carousel .carousel-slide img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;

}

/* ⬅ ➡ 버튼: 이제는 이미지 밖, 양옆에 고정 */
#about-carousel .carousel-nav{
  position: static;          /* absolute 제거 */
  transform: none;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 0;  
  background: rgba(10,10,11,.55);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
}

#about-carousel .carousel-nav:hover{
  background: rgba(10,10,11,.72);
  border-color: rgba(255,255,255,.28);
}

/* 도트는 아래에 중앙 정렬 */
#about-carousel .carousel-dots{
  display: flex;
  justify-content: center;
  gap: .55rem;
  padding: .9rem 0 0;
}

#about-carousel .carousel-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.28);
  cursor: pointer;
  padding: 0;
}

#about-carousel .carousel-dot[aria-current="true"]{
  background: rgba(255,255,255,.88);
  width: 20px;
}

@media (max-width: 900px){
  #about-carousel .carousel-nav{
    width: 34px;
    height: 34px;
  }
  #about-carousel .carousel-slide img{
    max-height: 260px;
  }
}


#about-carousel .carousel-header{
  width: min(var(--carousel-w, 1100px), 100%);
  margin-inline: auto;      /* 가운데로 가져오기 */
  padding: 18px 0 12px;
  text-align: center;       /* ✅ 여기 때문에 중앙정렬 */
}

#about-carousel .carousel-title{
  margin: 0 0 .35rem;
  letter-spacing: .08em;
}

#about-carousel .carousel-lede{
  margin: 0 auto; 
}
/* 1) About 페이지 공통 미디어 폭 변수 정의 */
body[data-page="about"]{
  --about-media-w: 1200px;   /* 860, 900, 960 등 취향대로 한 번에 조절 */
  --carousel-w: var(--about-media-w); /* 캐러셀도 같은 값 사용 */
}

/* 2) 위쪽 비디오 래퍼에 적용 */
body[data-page="about"] .about-hero-video-wrap{
  width: min(var(--about-media-w), 100%);
  margin-left: auto;
  margin-right: auto;
}

/* ▶ 캐러셀 화살표 SVG 아이콘 스타일 */
#about-carousel .carousel-nav .icon-chevron{
  width: 22px;              /* 아이콘 크기 */
  height: 22px;
  display: block;
  fill: none;               /* 안은 비우고 */
  stroke: currentColor;     /* 버튼의 color를 따라감 */
  stroke-width: 3;          /* ✅ 선 두께 (2~4 선호도에 맞게 조절) */
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ◀ 이전 버튼(왼쪽 화살표)만 뒤집기 */
#about-carousel .carousel-nav.prev .icon-chevron{
  transform: rotate(180deg);
}


.footer-inner{
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem 0 1.2rem;
  font-size: .9rem;
}

/* 위쪽 Back to top 줄 */
.footer-top{
  display: flex;
  justify-content: flex-end;
}

/* 아래쪽: 로고 + 링크들 한 줄 */
.footer-bottom{
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;          /* 화면 좁아지면 자연스럽게 내려가도록 */
}

/* 푸터용 로고 */
.footer-brand{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--text);
}
.footer-brand span{
  font-weight: 600;
}

/* 약관/정책 링크들 */
.footer-links{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  color: var(--text-dim);
  font-size: .85rem;
}

.footer-links a{
  color: var(--text-dim);
  text-decoration: none;
}
.footer-links a:hover{
  text-decoration: underline;
}

.footer-sep{
  opacity: .6;
}

/* 카피라이트 줄 */
.footer-copy{
  margin: 0;
  font-size: .8rem;
  color: var(--text-dim);
}
/* 모바일: 위에 헤더메뉴(footer-nav), 아래에 로고/팀유즈/프라이버시/카피라이트 */
@media (max-width: 900px){
  /* Back to top 중앙 */
  .footer-top{
    justify-content: center;
  }

  /* 아래 전체 레이아웃: 위→아래로 쌓기 */
  .footer-bottom{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
  }

  /* 1️⃣ 헤더 메뉴(nav)를 맨 위로 */
  .footer-nav{
    order: 1;
    justify-content: center;
  }

  /* 2️⃣ 가운데 세로선 → 가로선처럼 */
  .footer-divider{
    order: 2;
    width: 100%;
    height: 1px;
  }

  /* 3️⃣ 로고 + 팀유즈/프라이버시/카피라이트는 맨 아래 */
  .footer-left{
    order: 3;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
  }

  .footer-brand{
    justify-content: center;
  }

  .footer-links{
    justify-content: center;
  }

  .footer-meta{
    align-items: center;
  }

  .footer-copy{
    text-align: center;
  }
}
.footer-brand img{
  width: 60px;   /* 24~40 사이에서 원하는 값으로 조절 */
  height: 60px;
}

/* 오른쪽 묶음(링크 + 저작권) */
.footer-meta{
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.footer-inner{
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem 0 1.2rem;
  font-size: .9rem;
}

/* 위쪽 Back to top 줄 */
.footer-top{
  display: flex;
  justify-content: flex-end;
}

/* 아래쪽 전체 래퍼: 왼쪽+세로선+오른쪽 */
.footer-bottom{
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  flex-wrap: wrap;
}

/* 🔹 왼쪽 묶음: 로고 + 약관/저작권 */
.footer-left{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* 로고 */
.footer-brand{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text);
}

.footer-brand img{
  width: 48px;   /* 여기서 로고 크기 조절 (지금은 48x48) */
  height: 48px;
}

/* 약관+저작권 묶음 */
.footer-meta{
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

/* 약관/정책 링크들 */
.footer-links{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  color: var(--text-dim);
  font-size: .85rem;
}

.footer-links a{
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap; 
}
.footer-links a:hover{
  text-decoration: underline;
}

.footer-sep{
  opacity: .6;
}

/* 카피라이트 줄 */
.footer-copy{
  margin: 0;
  font-size: .8rem;
  color: var(--text-dim);
}

/* 🔹 가운데 세로선 */
.footer-divider{
  width: 1px;
  background: rgba(255,255,255,.18);
  align-self: stretch;  /* 위–아래 전체 높이 채우기 */
}

/* 🔹 오른쪽: 헤더 메뉴 목록 */
.footer-nav{
  display: flex;
  flex-direction: row;      /* ← 세로 대신 가로 */
  flex-wrap: wrap;          /* 줄 부족하면 다음 줄로 자동 내려감 */
  gap: .6rem 1.2rem;        /* 세로/가로 간격 */
  font-size: .85rem;
  color: var(--text-dim);
  justify-content: flex-start;
}

.footer-nav a{
  color: var(--text-dim);
  text-decoration: none;
}
.footer-nav a:hover{
  text-decoration: underline;
}

body[data-page="about"] .about-hero-video-wrap{
  position: relative;
}

body[data-page="about"] .about-hero-overlay{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;   /* ✅ 진짜 중앙 */
  text-align: center;
  padding: 1rem;
  z-index: 2;
  pointer-events: none;  /* ✅ 텍스트가 클릭 방해 안 함(선택) */
}

body[data-page="about"] .about-hero-overlay__title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
}
body[data-page="about"] .about-hero-band{
  position: relative;
  overflow: hidden;

  /* ✅ 이미지만 */
  background-image: url("../assets/secsion/product_background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  min-height: 52vh;
  display: flex;
  align-items: center;

  color: #eaeaea;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Admin page title */
body[data-page="admin"] .admin-brand{
  text-align:center;
  margin: 1.5rem 0 1.25rem;
}

body[data-page="admin"] .admin-brand__logo{
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1;
}

.account-info{
  align-items: flex-start;
}

.account-fields{
  display: grid;
  gap: .4rem;
  width: 100%;
}

.account-field .label{
  margin-bottom: .2rem;
}

.account-email{
  color: var(--text-dim);
  word-break: break-word;
}
















.legal-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-header-inner {
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.35rem;
}

.legal-brand img {
  display: block;
  width: 44px;
  height: 44px;
}

.legal-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.legal-nav a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 1.2rem;
  line-height: 1.3;
  transition: color 0.2s ease;
}

.legal-nav a:hover {
  color: #ffffff;
}

.legal-nav a.is-active {
  color: #ffffff;
  font-weight: 700;
}

.legal-home-page {
  min-height: 100vh;
  background: #0a0a0a;
  color: #ffffff;
}

.legal-home-hero {
  min-height: calc(100vh - 132px);
}

.legal-home-hero-inner {
  min-height: calc(100vh - 132px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.legal-home-panel {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  text-decoration: none;
  color: #ffffff;
}

.legal-home-panel-text {
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
}

.legal-home-panel-icon {
  margin-top: 18px;
  font-size: 1.6rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.68);
  transition: transform 0.2s ease, color 0.2s ease;
}

.legal-home-panel:hover .legal-home-panel-icon {
  transform: translateY(4px);
  color: #ffffff;
}

@media (max-width: 900px) {
  .legal-header-inner {
    min-height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .legal-brand {
    font-size: 1.1rem;
  }

  .legal-brand img {
    width: 36px;
    height: 36px;
  }

  .legal-nav {
    gap: 14px;
  }

  .legal-nav a {
    font-size: 1rem;
  }

  .legal-home-hero,
  .legal-home-hero-inner {
    min-height: auto;
  }

  .legal-home-hero-inner {
    padding-top: 80px;
    padding-bottom: 80px;
    flex-direction: column;
    justify-content: center;
    gap: 56px;
  }

  .legal-home-panel {
    min-width: auto;
  }

  .legal-home-panel-text {
    font-size: clamp(2rem, 10vw, 3.2rem);
  }
}

.legal-page {
  min-height: 100vh;
  background: #0a0a0a;
  color: #ffffff;
}

.legal-section {
  width: 100%;
}

.legal-content-wrap {
  max-width: 1100px;
  padding-top: 24px;
  padding-bottom: 96px;
}

.legal-content-wrap--hero {
  padding-top: 40px;
  padding-bottom: 0;
  text-align: center;
}

.legal-eyebrow {
  margin: 0 0 8px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.legal-intro {
  max-width: 760px;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}

.legal-page h1 {
  font-size: 2.4rem;
  line-height: 1.2;
  margin: 0 0 20px;
}

.legal-page h2 {
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 36px 0 12px;
}

.legal-page h3 {
  font-size: 1rem;
  line-height: 1.5;
  margin: 24px 0 10px;
}

.legal-page p,
.legal-page li {
  font-size: 0.98rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82);
}

.legal-page ul {
  margin: 10px 0 16px 20px;
  padding: 0;
}

.legal-page a {
  color: #9ec3ff;
  text-decoration: none;
}

.legal-page a:hover {
  text-decoration: underline;
}

.legal-page hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 28px 0;
}

@media (max-width: 900px) {
  .legal-page h1 {
    font-size: 2rem;
  }

  .legal-content-wrap {
    padding-top: 20px;
    padding-bottom: 72px;
  }

  .legal-content-wrap--hero {
    padding-top: 28px;
  }
  .legal-page h1.legal-title-fx {
    font-size: clamp(2.2rem, 10vw, 3.6rem);
    padding-top: 18px;
    padding-bottom: 18px;
  }  
}

.legal-page h1.legal-title-fx {
  position: relative;
  display: table;
  margin: 0 auto 20px;
  padding-top: 22px;
  padding-bottom: 22px;
  font-size: clamp(2.8rem, 6vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-align: center;
  cursor: default;
}

.legal-title-fx::before,
.legal-title-fx::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.18)
  );
  transform: scaleX(1);
  transition: transform 0.45s ease;
  pointer-events: none;
}

.legal-title-fx::before {
  top: 0;
  transform-origin: left center;
}

.legal-title-fx::after {
  bottom: 0;
  transform-origin: right center;
}

.legal-title-fx:hover::before {
  transform: scaleX(0);
  transform-origin: right center;
}

.legal-title-fx:hover::after {
  transform: scaleX(0);
  transform-origin: left center;
}


.legal-accordion {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.legal-accordion:last-of-type {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.legal-accordion + .legal-accordion {
  margin-top: 0;
}

.legal-accordion-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 22px 0;
  cursor: pointer;
  user-select: none;
}

.legal-accordion-summary::-webkit-details-marker {
  display: none;
}

.legal-accordion-summary span {
  font-size: 1.18rem;
  line-height: 1.4;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.legal-accordion-summary::after {
  content: "⌄";
  flex: 0 0 auto;
  font-size: 1.1rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
  transition: transform 0.25s ease, color 0.25s ease;
}

.legal-accordion[open] .legal-accordion-summary::after {
  transform: rotate(180deg);
  color: #ffffff;
}

.legal-accordion-summary:hover span {
  color: #ffffff;
}

.legal-accordion-content {
  padding: 0 0 26px;
}

.legal-accordion-content > :first-child {
  margin-top: 0;
}

.legal-accordion-content > :last-child {
  margin-bottom: 0;
}

.legal-accordion-content h3 {
  margin-top: 20px;
}

@media (max-width: 900px) {
  .legal-accordion-summary {
    padding: 18px 0;
  }

  .legal-accordion-summary span {
    font-size: 1.02rem;
  }

  .legal-accordion-content {
    padding: 0 0 22px;
  }
}



body[data-page="account"] #sub-card,
body[data-page="account"] #code-card{
  max-width: none;
}

body[data-page="account"] #sub-card .card-row{
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: .75rem 1.25rem;
  align-items: start;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

body[data-page="account"] #sub-card .card-row > div{
  display: contents;
}

body[data-page="account"] #sub-card .label{
  grid-column: 1;
  color: var(--text-dim);
  font-size: .86rem;
  font-weight: 700;
}

body[data-page="account"] #sub-card .value,
body[data-page="account"] #sub-card .small{
  grid-column: 2;
}

body[data-page="account"] #sub-card .small{
  margin-top: -.35rem;
  color: var(--text-dim);
}

body[data-page="account"] #sub-card .card-row > div[style*="display:none"]{
  display: none !important;
}

body[data-page="account"] #sub-card .hint,
body[data-page="account"] #sub-card .actions{
  margin-top: 1rem;
}

/* Redeem code 카드도 왼쪽 라벨 / 오른쪽 내용 */
body[data-page="account"] #code-card{
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: .75rem 1.25rem;
  align-items: start;
  margin-top: 1rem;
}

body[data-page="account"] #code-card > .label{
  grid-column: 1;
  color: var(--text-dim);
  font-size: .86rem;
  font-weight: 700;
}

body[data-page="account"] #code-form,
body[data-page="account"] #code-msg,
body[data-page="account"] #code-current{
  grid-column: 2;
}

body[data-page="account"] #code-form{
  display: flex;
  gap: .6rem;
  align-items: center;
}

body[data-page="account"] #code-form .input{
  flex: 1 1 auto;
  min-width: 0;
}

/* 모바일에서는 다시 세로로 */
@media (max-width: 640px){
  body[data-page="account"] #sub-card .card-row,
  body[data-page="account"] #code-card{
    grid-template-columns: 88px minmax(0, 1fr);
    gap: .4rem .65rem;
  }
  body[data-page="account"] #sub-card .label,
  body[data-page="account"] #code-card > .label{
    grid-column: 1;
    font-size: .72rem;
    line-height: 1.25;
  }

  body[data-page="account"] #sub-card .value,
  body[data-page="account"] #sub-card .small,
  body[data-page="account"] #code-form,
  body[data-page="account"] #code-msg,
  body[data-page="account"] #code-current{
    grid-column: 2;
  }
  body[data-page="account"] #sub-card .value{
    font-size: .86rem;
    line-height: 1.3;
  }

  body[data-page="account"] #sub-card .small,
  body[data-page="account"] #code-current{
    font-size: .72rem;
    line-height: 1.35;
  }

  body[data-page="account"] #sub-card .hint,
  body[data-page="account"] #code-msg{
    font-size: .72rem;
    line-height: 1.35;
  }

  body[data-page="account"] #code-form{
    flex-direction: row;
    align-items: center;
    gap: .45rem;
  }

  body[data-page="account"] #code-form .input{
    font-size: .78rem;
    padding: .55rem .65rem;
  }

  body[data-page="account"] #code-form .btn,
  body[data-page="account"] #manage-btn{
    font-size: .72rem;
    padding: .52rem .65rem;
    line-height: 1.1;
  }
}


/* === Artists page: interview layout =============================== */
body[data-page="artists"] .interview-list{
  display:grid;
  gap:1.2rem;
  margin-top:1.25rem;
}

body[data-page="artists"] .interview-card{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:1.1rem;
  padding:1.25rem;
  border-radius:20px;
  overflow:hidden;
}

body[data-page="artists"] .interview-media{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

body[data-page="artists"] .interview-media video{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:16/9;
  object-fit:cover;
  background:#000;
}

@media (max-width:900px){
  body[data-page="artists"] .interview-card{
    grid-template-columns:1fr;
  }
}




.password-reset-section {
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 34%),
    #050505;
}

.password-reset-card {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 72px 56px;
  border-radius: 32px;
  background: rgba(14, 14, 14, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

.password-reset-card h1 {
  margin: 0 0 16px;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
  color: #fff;
  white-space: nowrap;
}

.password-reset-desc {
  margin: 0 0 34px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 1.08rem;
  line-height: 1.6;
}

.password-reset-form {
  display: grid;
  gap: 16px;
}

.password-reset-input {
  width: 100%;
  height: 62px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: #050505;
  color: #fff;
  font-size: 1.12rem;
  text-align: center;
  outline: none;
}

.password-reset-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.password-reset-input:focus {
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}

.password-reset-form .btn,
.password-reset-action .btn {
  min-height: 58px;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: 999px;
}

.password-reset-action {
  margin-top: 28px;
  display: grid;
  gap: 16px;
}

.password-reset-action[hidden] {
  display: none;
}

.password-reset-action p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
}

.password-reset-status {
  min-height: 28px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  line-height: 1.5;
}

.password-reset-back {
  display: inline-flex;
  margin-top: 26px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 1rem;
}

.password-reset-back:hover {
  color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .password-reset-section {
    align-items: flex-start;
    padding-top: 72px;
  }

  .password-reset-card {
    width: calc(100% - 32px);
    padding: 48px 22px;
    border-radius: 26px;
  }

  .password-reset-card h1 {
    font-size: clamp(2.3rem, 11vw, 3.5rem);
    white-space: nowrap;
  }

  .password-reset-desc {
    font-size: 1rem;
  }

  .password-reset-input {
    height: 58px;
    font-size: 1.05rem;
  }

  .password-reset-form .btn,
  .password-reset-action .btn {
    min-height: 56px;
    font-size: 1rem;
  }
}


@media (max-width: 520px) {
  .team-code-row {
    flex-direction: column;
  }

  .team-code-row .btn {
    width: 100%;
  }
}

.team-page {
  min-height: 70vh;
}

.team-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.team-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.team-panel {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 18px;
  margin-top: 18px;
}

.team-panel h2 {
  margin: 0 0 14px;
}

.team-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.team-list {
  display: grid;
  gap: 10px;
}

.team-card,
.event-card {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  padding: 14px;
}

.team-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.team-card span,
.event-card small,
.muted-text {
  color: #9a9a9a;
}

.team-events {
  display: grid;
  gap: 10px;
}

.team-members {
  display: grid;
  gap: 10px;
}

.team-members-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.team-members-title span {
  color: #9a9a9a;
  font-size: 0.9rem;
}

.team-members-list {
  display: grid;
  gap: 10px;
}

.team-member-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.11);
}

.team-member-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.team-member-main strong,
.team-member-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-member-main span,
.team-member-meta {
  color: #9a9a9a;
  font-size: 0.9rem;
}

.team-member-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.event-date {
  color: #9ec5ff;
  font-size: 0.85rem;
  margin-bottom: 6px;
}

@media (max-width: 760px) {
  .team-header,
  .team-card,
  .team-member-card {
    align-items: stretch;
    flex-direction: column;
  }

  .team-actions {
    width: 100%;
  }

  .team-member-meta {
    justify-content: flex-start;
  }
}

.team-modal[hidden] {
  display: none;
}

.team-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.team-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
}

.team-modal-card {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  margin: 16vh auto 0;
  padding: 20px;
  border-radius: 18px;
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  color: #ffffff;
}

.team-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.team-modal-head h3 {
  margin: 0;
}

.team-modal-close {
  appearance: none;
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.team-modal-text {
  color: #aaaaaa;
  margin: 0 0 16px;
}

.team-modal-label {
  display: block;
  color: #9ec5ff;
  font-size: 12px;
  margin: 12px 0 6px;
}

.team-modal-team {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.team-code-row {
  display: flex;
  gap: 8px;
}

.team-code-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font: inherit;
  letter-spacing: 0.06em;
}

.team-code-input:focus {
  outline: 1px solid rgba(120, 180, 255, 0.85);
}

.team-copy-status {
  min-height: 18px;
  margin: 10px 0 0;
  color: #9ec5ff;
  font-size: 12px;
}

.team-join-preview {
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(120, 180, 255, 0.10);
  border: 1px solid rgba(120, 180, 255, 0.30);
}

.team-join-preview[hidden] {
  display: none;
}

.team-join-preview-label {
  display: block;
  color: #9ec5ff;
  font-size: 12px;
  margin-bottom: 4px;
}

.team-join-preview strong {
  display: block;
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 6px;
}

.team-join-preview p {
  margin: 0;
  color: #b8b8b8;
  font-size: 13px;
}

.team-join-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

@media (max-width: 640px) {
  .team-modal {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 72px 16px 16px;
    overflow-y: auto;
  }

  .team-modal[hidden] {
    display: none;
  }

  .team-modal-card {
    width: 100%;
    max-width: 440px;
    margin: 0;
    padding: 18px;
    border-radius: 16px;
    max-height: calc(100dvh - 96px);
    overflow-y: auto;
  }

  .team-modal-head {
    margin-bottom: 10px;
  }

  .team-modal-head h3 {
    font-size: 1.05rem;
  }

  .team-modal-text {
    font-size: 0.92rem;
  }

  .team-code-row {
    flex-direction: column;
  }

  .team-code-row .btn {
    width: 100%;
  }

  .team-code-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.95rem;
  }

  .team-join-actions {
    justify-content: stretch;
  }

  .team-join-actions .btn {
    width: 100%;
  }
}


.team-member-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.team-member-actions .btn {
  min-width: 76px;
}

@media (max-width: 760px) {
  .team-member-actions {
    justify-content: flex-start;
  }
}