/* =========================
   Zerogram Brand Tokens
   - 여기만 바꾸면 전역 스타일이 같이 바뀜
========================= */
:root{
  /* Core */
  --zg-text: #F5F5F7;
  --zg-muted: rgba(245,245,247,0.65);
  --muted: var(--zg-muted);

  /* Lines */
  --zg-line: rgba(255,255,255,0.20);
  --zg-line-2: rgba(255,255,255,0.12);
  --line:#1a1a1a;

  /* Brand accent (포인트 컬러: 여기만 바꾸면 전체 변화) */
  --zg-accent: #6f4dff;     /* purple */
  --zg-light-grey: #f5f4f2;
  --zg-old-black-paper: #231f1c;
  --zg-old-paper: #d6d2d0;

  --zg-green: rgba(0,255,170,.28);
  --zg-orange: rgba(255, 230, 120, .50);
  --zg-red: rgba(255, 90, 90, .45);

  /* Surfaces */
  --zg-card-bg: rgba(0,0,0,0.35);
  --zg-card-border: rgba(255,255,255,0.12);

  /* Radius & Shadow 
  --zg-radius: 18px;
  --zg-shadow: 0 18px 60px rgba(0,0,0,0.55);
  */

  /* Typography */
  --zg-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  /* Layout */
  --max: 1440px;
}

body{
  margin:0;
  font-family: var(--zg-font);
  background: var(--zg-light-grey);
  color: var(--zg-old-black-paper);
}
*{ box-sizing:border-box; }
html,body{ 
  height: auto;      /* 🔥 기존 height:100% 제거 */
  min-height: 100%;  /* 있어도 되고 없어도 됨 */
}

a{ color:inherit; text-decoration:none; }

/* ================= LAYOUT ================= */
.z-wrap{
  max-width: var(--max);
  margin:0 auto;
  padding:44px 22px 46px;
}

.z-sub{ margin:10px 0 0; color:var(--zg-muted); }



/* Under-construction pages */
.zg-section {
  padding-top: 64px;
}

.zg-notice {
  margin: 0 auto;
  max-width: 760px;
  padding: 24px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: #fff;
  color: var(--zg-old-black-paper);
  line-height: 1.7;
}

.zg-notice--center {
  text-align: center;
}
/* ================= HEADER ================= */
.z-header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(245,244,242,.21);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,0,0,.18);
}

.z-header-inner{
  max-width: var(--max);
  margin:0 auto;
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.z-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;              /* mark ↔ 로고 간격 */
}

.z-mark img {
  width: 40px;
  height: 40px;
  display: block;
}

.z-brand-logo img {
  height: 21px;           /* 글자 로고는 mark보다 살짝 작게 */
  width: auto;
  display: block;
  position: relative;
  top:4px;
}

.z-dash-btn{
  padding:10px 18px;
  border-radius:999px;
  border:2px solid var(--zg-old-black-paper);
  background: var(--zg-old-black-paper);
  color:#fff;
  font-weight:800;
  font-size:14px;
}
.z-dash-btn:hover{ opacity:.92; }

.z-newproject-btn{
  border-color: var(--zg-accent);
  background: var(--zg-accent);
  color: #fff;
}

.z-header--portal .z-newproject-btn{
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
}
.z-iconbtn svg{
  width:18px;
  height:18px;
}

/* ================= ICON BUTTONS ================= */
.z-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.z-iconbtn{
  width:35px;
  height:35px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:transparent;
}
/* portal back-to-site button (optional) */
.z-dash-btn--ghost{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
.z-header--portal .z-iconbtn{
  background: transparent;
  border: 0; /* 너가 보더 뺐다 했으니 */
}
/* header left group */
.z-left{
  display:flex;
  align-items:center;
  gap:14px;
}

.z-context{
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.7;
}

/* ================= NAV ================= */
.z-burger{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:transparent;
  cursor:pointer;
}

.z-burger-lines{
  width:18px;
  height:12px;
  position:relative;
  display:block;
}

.z-burger-lines::before,
.z-burger-lines::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:rgba(0,0,0,.85);
  border-radius:2px;
}

.z-burger-lines::before{ top:0; }
.z-burger-lines::after{ bottom:0; }

/* drawer overlay */
.z-nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.18);
  z-index:80;
}

/* drawer */
.z-nav{
  position:fixed;
  top:0;
  left:0;

  height: 100dvh;     /* ✅ iOS 주소창/툴바 변화 대응 */
  height: 100svh;     /* ✅ fallback (더 안정적) */

  width:min(360px, 86vw);
  background:#fff;
  border-right:1px solid rgba(0,0,0,.14);
  transform:translateX(-102%);
  transition:transform .25s ease;
  z-index:90;
}

.z-nav.is-open{ transform:translateX(0); }

.z-nav-top{
  height:72px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 18px;
  border-bottom:1px solid rgba(0,0,0,.14);
}

.z-nav-close{
  width:40px;
  height:40px;
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:28px;
  line-height:1;
}

.z-nav-brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.z-nav-links{
  padding:28px 22px;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.z-nav-link{
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  text-decoration: none;
  color: var(--zg-old-black-paper);
}

.z-nav-link:hover{ opacity:.75; }

body.z-nav-lock{
  overflow:hidden;
}

/* Drawer CTA (Portal only) */
.z-nav-cta{
  padding: 14px 16px 6px;
}

.z-nav-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 100%;
  padding: 12px 14px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  background: rgba(255,255,255,.06);

  font-weight: 700;
  letter-spacing: .02em;
}

.z-nav-cta-btn:hover{
  background: rgba(255,255,255,.10);
}
/* User icon – no background */
.z-userbtn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.z-userbtn img {
  width: 35px;
  height: 35px;
  display: block;
}

/* hover 시에도 동그라미 X */
.z-userbtn:hover {
  background: none;
}



/* Keyboard focus visibility */
.z-dash-btn:focus-visible,
.z-iconbtn:focus-visible,
.z-burger:focus-visible,
.z-nav-close:focus-visible,
.z-nav-link:focus-visible,
.z-nav-cta-btn:focus-visible,
.z-nav-bottom-btn:focus-visible {
  outline: 2px solid var(--zg-accent);
  outline-offset: 2px;
}
/* ================= FONT/TEXT ================= */
.z-title{
  margin:0;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing:-.04em;
}
/* ================= ZEROGRAM BADGE (GLOBAL) ================= */
.zg-badge{
  --size: 21px;
  --bg: #111;
  --fg: #fff;
  --bd: rgba(0,0,0,.15);

  width: var(--size);
  height: var(--size);
  border-radius: 999px;

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

  font-weight: 700;
  font-size: calc(var(--size) * 0.42);
  line-height: 1;
  letter-spacing: 0.02em;

  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bd);

  user-select: none;
  flex-shrink: 0;
}
.zg-badge--sm{ --size: 21px; } /* default */
.zg-badge--md{ --size: 34px; } 
.zg-badge--lg{ --size: 44px; }

/* Client action */
.zg-badge--client{
  --bg: #ffffff;
  --fg: #111111;
  --bd: rgba(0,0,0,.25);
}

/* Studio action */
.zg-badge--studio{
  --bg: #6d5cff;                /* Zerogram 포인트 컬러 */
  --fg: #ffffff;
  --bd: rgba(109,92,255,.45);
}

/* =========================
   Responsive: header actions -> drawer bottom
   ========================= */

/* 좁은 화면에서는 헤더 오른쪽 액션 중 Cart만 유지 */
@media (max-width: 820px){
  .z-actions{
    display:flex !important;
    margin-left:auto;
  }

  .z-actions .z-dash-btn,
  .z-actions .z-iconbtn:not(.z-iconbtn--cart){
    display:none !important;
  }

  .z-actions .z-iconbtn--cart{
    display:inline-flex !important;
  }

}

/* ✅ 하단바는 drawer 최하단에 절대 고정 */
.z-nav-bottom{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  border-top: 1px solid rgba(0,0,0,.18);
  background: #f5f4f2;
  z-index: 5;
  padding-bottom: env(safe-area-inset-bottom);
}

.z-nav-bottom--single{
  grid-template-columns: 1fr;
}
/* portal drawer는 어두운 배경일 가능성이 높아서 분기 */
.z-nav--portal .z-nav-bottom{
  border-top: 1px solid rgba(255,255,255,.18);
  background: #0f0f10;
}

.z-nav-bottom-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 78px;
  text-decoration:none;
  border-right: 1px solid rgba(0,0,0,.18);
  color:#111;
}

.z-nav--portal .z-nav-bottom-btn{
  border-right: 1px solid rgba(255,255,255,.18);
  color:#fff;
}

.z-nav-bottom-btn:last-child{
  border-right: 0;
}

.z-nav-bottom-btn--dash{
  background:#111;
  color:#fff;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.z-nav--portal .z-nav-bottom-btn--dash{
  background:#fff;
  color:#111;
}

.z-nav-bottom-btn img{
  width: 26px;
  height: 26px;
}

/* 메뉴 링크가 하단바에 가리지 않게 */
.z-nav-links{
  padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

/* 큰 화면에서는 하단바 숨김(원하면 유지 가능) */
@media (min-width: 821px){
  .z-nav-bottom{
    display:none;
  }
}
/* =========================
   FIX: iOS mobile drawer bottom bar not visible
   - make drawer a flex column
   - scroll links area only
   - keep bottom bar sticky
========================= */

/* drawer 자체를 column 레이아웃으로 */
.z-nav{
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 내부 스크롤은 links에서만 */
}

/* 상단/CTA는 고정 영역 */
.z-nav-top,
.z-nav-cta{
  flex: 0 0 auto;
}

/* 링크 영역만 스크롤되게 */
.z-nav-links{
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* 기존에 넣어둔 padding-bottom(바텀바 가림 방지) 제거/완화 */
  padding-bottom: 18px !important;
}

/* 바텀바: absolute 대신 sticky */
.z-nav-bottom{
  position: sticky !important;
  bottom: 0;

  flex: 0 0 auto;
  z-index: 999; /* 확실하게 위로 */
}

/* iOS safe-area */
.z-nav-bottom{
  padding-bottom: env(safe-area-inset-bottom);
}

/* 혹시 기존 absolute 값이 남아있어서 영향 주면 무력화 */
.z-nav-bottom{
  left: auto !important;
  right: auto !important;
}

/* ================= INPUT BOX ================= */
input[type="checkbox"] {
  accent-color: var(--zg-accent); /* 원하는 색 */
}
/* ================= BUTTONS ================= */
/* === Always-on accent border button === */
.btn-accent-glow{
  position:relative;
  overflow:hidden;
  border-radius:999px;

  background: rgba(255,255,255,0.02);
  color:#fff;
  border: 1px solid transparent !important;

  /* 중요: 실제 테두리는 pseudo-element가 담당 */
  z-index:0;
}

/* animated border */
.btn-accent-glow::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px; /* border thickness */

  background:
    linear-gradient(
      120deg,
      rgba(111,77,255,0.25),
      rgba(111,77,255,0.9),
      rgba(111,77,255,0.25)
    );
  background-size: 300% 300%;

  animation: zgBorderFlow 6s linear infinite;

  /* border만 보이게 */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events:none;
  z-index:-1;
}

/* subtle inner fill */
.btn-accent-glow::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:
    linear-gradient(
      135deg,
      rgba(111,77,255,0.10),
      rgba(255,255,255,0.02)
    );
  opacity:0.6;
  z-index:-1;
}

/* hover = 반응만 살짝 */
.btn-accent-glow:hover{
  transform: translateY(-1px);
}

.btn-accent-glow:hover::before{
  animation-duration: 2.5s; /* faster */
}

.btn-accent-glow:hover::after{
  opacity:0.85;
}

/* active */
.btn-accent-glow:active{
  transform: translateY(0);
}

/* keyframes */
@keyframes zgBorderFlow{
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* focus */
.btn-accent-glow:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px rgba(111,77,255,0.45),
    0 0 0 6px rgba(111,77,255,0.18);
}


/* ================= FOOTER ================= */
.z-foot{
  margin-top:0;
  padding:22px 16px;
  background:#0b0b0c;
  border-top:0;
  text-align:center;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:lowercase;
  color:rgba(255,255,255,.86);
}