/* =========================
   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;
}

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:72px 0; }
.section.muted{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); }
.lede{ color:var(--text-dim); max-width:64ch; }
.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);
}

/* --------- Helpers / UI tokens --------- */
.kicker{font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-2); font-size:.8rem;}
.section-title{display:flex; align-items:flex-end; gap:.6rem; margin:0 0 .75rem;}
.section-title .bar{flex:1 1 auto; height:2px; background:linear-gradient(90deg, rgba(124,92,255,.6), transparent);}
.text-gradient{background:linear-gradient(135deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.pill{display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; padding:.35rem .6rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:var(--text-dim);}
.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:linear-gradient(180deg, rgba(124,92,255,.13), rgba(255,255,255,.02)); border:1px solid rgba(124,92,255,.28); 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:1000;
  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; }

/* ✅ 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,
.dropdown-toggle{ display:inline-flex; align-items:center; gap:.4rem; padding:.6rem .9rem; border-radius:999px; border:1px solid transparent; }
.site-nav a:hover, .dropdown-toggle: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; }
  .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 0 72px;
  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:contain;   /* 기본(데스크톱): 전체 보이기 */
  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, 16/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:.8rem 1.1rem; border-radius:999px; border:1px solid rgba(255,255,255,.16); }
.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, #main){ scroll-margin-top:calc(var(--header-h) + 8px); }
/* 비-홈 페이지에서 상단 여백 필요할 때 */
body:not([data-page="home"]):not([data-page="admin"]) #main {
  padding-top: var(--header-h);
}
/* 홈(index) 전용: body에 home-page id가 있으면 상단 패딩 제거 */
body#home-page #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;
}
/* 이미지 채우기 */
.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; }
.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:220px; z-index:1001;
  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, 320px);
  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 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{
  /* 전역 .pill이 inline-flex라 폭이 안 늘어나므로, 드롭다운 내부만 flex로 재정의 */
  display:flex;
  flex: 1 1 auto;     /* 남는 가로폭 채우기 */
  width:auto;         /* flex에 폭 결정을 맡김 */
  justify-content:center;  /* 텍스트 중앙 정렬 (원하면 space-between 으로 변경) */
  box-sizing:border-box;
}

/* ─────────────────────────────────────────────
   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)); /* 미세조정용(선택) */
}
.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); /* 살짝 더 아래로 */
  }
}

@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 */
    display: block;
    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;
}


.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;
}

.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;
  padding-left: 1.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:absolute;
  top: 12px;
  right: 12px;
  font-size: .85rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
}

.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%);
}