/* =========================
   Infinity Loop — Global CSS (merged & cleaned)
========================= */

/* ---------- Variables ---------- */
:root{
  /* Brand */
  --brand:#451093;
  --brand-hover:#5c19cf;
  --brand-ink:#ffffff;

  /* Theme colors (dark default) */
  --bg:#0c0c10;
  --fg:#f2f3f7;
  --muted:#a9a9ba;

  --card:#14141b;
  --line:#242432;
  --ghost:rgba(69,16,147,.18);

  /* Layout */
  --radius:16px;
  --container:min(1120px, 92%);

  /* Hero */
  --hero-bg:none;

  /* Store badges (image-only buttons) */
  /* 60px 기본의 1.5배 → 90px */
  --store-img-h:90px;
}
:root[data-theme="light"]{
  --bg:#ffffff;
  --fg:#111218;
  --muted:#606274;

  --card:#fafafb;
  --line:#e7e8ee;
  --ghost:rgba(69,16,147,.15);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--fg);
  font-family:"Poppins", system-ui, Apple SD Gothic Neo, "Malgun Gothic", Segoe UI, Roboto, sans-serif;
  line-height:1.65;
}
img{max-width:100%; display:block}
a{color:var(--fg); text-decoration:none}
.container{width:var(--container); margin-inline:auto}
.hidden{display:none!important}
.muted{color:var(--muted)}

/* ---------- NAV 기본 ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(150%) blur(8px);
  background: color-mix(in hsl, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--line);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
}

.logo-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.logo-link img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.logo-link span {
  font-weight: 800;
  font-size: 1.2rem;
}

/* 메뉴 */
.nav ul {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  color: color-mix(in hsl, var(--fg) 85%, transparent);
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: var(--fg);
}

/* 로그인 버튼 영역 */
.auth-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- 반응형 (모바일) ---------- */
@media (max-width: 768px) {
  .nav .wrap {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }

  /* 로고 중앙 */
  .logo-with-icon {
    justify-content: center;
    width: 100%;
  }

  /* 메뉴 감추기 or 단순화 */
  .nav ul {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 10px;
  }

  .nav ul li a {
    font-size: 14px;
    padding: 4px 6px;
  }

  /* 로그인 영역도 아래로 */
  .auth-inline {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
    flex-wrap: wrap;
  }

  .auth-inline button {
    font-size: 13px;
    padding: 6px 10px;
  }
}


/* ---------- Buttons / Forms ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:.7rem 1rem; border-radius:12px; border:1px solid var(--line);
  background:color-mix(in hsl, var(--bg) 85%, transparent);
  color:var(--fg); font-weight:700; cursor:pointer;
  transition:transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--brand); color:var(--brand-ink); border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-hover); border-color:var(--brand-hover); box-shadow:0 10px 26px var(--ghost)}
.btn-outline{background:transparent; color:var(--fg)}
.btn-outline:hover{background:var(--brand); border-color:var(--brand); color:var(--brand-ink)}
.btns{display:flex; flex-wrap:wrap; gap:10px}

.form{display:grid; gap:1rem}
.form input,.form textarea{
  background:color-mix(in hsl, var(--bg) 90%, transparent);
  border:1px solid var(--line); color:var(--fg);
  padding:.8rem .9rem; border-radius:.6rem; font:inherit;
}
.form textarea{min-height:140px}

/* ---------- Sections / Grid / Cards ---------- */
section{padding:64px 0}
.hd{display:flex; align-items:end; justify-content:space-between; margin-bottom:18px; gap:1rem}
.hd h2{margin:0; font-size:28px; font-weight:800}

.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.grid-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
@media (max-width:900px){ .grid-2,.grid-3{grid-template-columns:1fr} }
.align-center{align-items:center}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .25s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.18), 0 0 0 1px var(--line) inset; border-color:var(--brand)}
.card-cover{
  height:220px; border-radius:12px; overflow:hidden; border:1px solid var(--line);
  background:#0e0e14; display:grid; place-items:center; color:var(--muted); margin-bottom:12px;
}
:root[data-theme="light"] .card-cover{background:#f1f2f7}
.pill{
  display:inline-block; padding:.2rem .55rem; border:1px solid var(--line); border-radius:999px;
  background:color-mix(in hsl, var(--bg) 88%, transparent); color:var(--muted); font-size:.8rem;
}
.list{display:grid; gap:1rem}
/* ---------- Hero (blur background + overlay) ---------- */
.hero {
  position: relative;
  min-height: 54vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
}

/* ✅ 블러 배경 */
.hero.hero--blur::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  filter: blur(8px) saturate(1.05) brightness(.65);
  transform: scale(1.06); /* 블러 경계선 방지 */
  z-index: 0;
}

/* ✅ 어둡게 덮기 */
.hero.hero--blur::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 50% at 50% 35%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.55));
  z-index: 1;
  pointer-events: none;
}

/* 내부 컨테이너 */
.hero .overlay {
  position: relative;
  z-index: 2; /* 배경 위에 올라오게 */
  padding: 200px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 리드 이미지 */
.lead-img {
  display: block;
  margin: 0 auto;
  max-width: 60%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45));
}

/* 반응형 */
@media (max-width: 768px) {
  .lead-img {
    max-width: 90%;
  }
}




/* ---------- Game meta ---------- */
.meta-row{display:flex; align-items:center; gap:.6rem; margin:.25rem 0; color:var(--fg)}
.meta-row .k{color:var(--muted); min-width:64px}
.game-title{margin:0; font-size:22px; font-weight:800}

/* ---------- Media carousel ---------- */
.media-carousel{
  position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#0e0e14;
}
:root[data-theme="light"] .media-carousel{background:#f1f2f7}
.media-stage{position:relative; width:100%; padding-top:56.25%}
.media-slide{position:absolute; inset:0; display:none}
.media-slide.active{display:block}
.media-slide iframe,.media-slide img{position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover}
.media-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line);
  background:color-mix(in hsl, var(--bg) 70%, transparent);
  color:var(--fg); cursor:pointer; user-select:none;
}
.media-arrow:hover{border-color:var(--brand); color:var(--brand)}
.media-arrow.prev{left:10px}
.media-arrow.next{right:10px}

/* ---------- Articles (row cards) ---------- */
#articles #articleList.list-rows{display:grid; gap:28px}

/* 전체가 클릭되는 카드 */
.article-item{
  display:flex; gap:24px; align-items:flex-start;
  padding:12px; border:1px solid var(--line); border-radius:14px;
  background:var(--card); color:inherit; text-decoration:none;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.article-item:hover{
  transform:translateY(-2px); border-color:var(--brand);
  box-shadow:0 10px 28px rgba(0,0,0,.15);
}
.article-item .thumb{
  width:min(420px, 42vw); aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background:#0e0e14; border:1px solid var(--line); flex:0 0 auto;
}
:root[data-theme="light"] .article-item .thumb{background:#e7e8ee}
.article-item .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.article-item .info{flex:1 1 auto; min-width:0}
.article-item .title{
  margin:6px 0 10px;
  font-size:clamp(20px, 2.8vw, 36px);
  font-weight:800; line-height:1.25;
}
.article-item .date{color:var(--muted); font-size:1rem}

/* 구분선 느낌 (옵션) */
#articles #articleList.list-rows > *:not(:last-child){
  border-bottom:1px solid var(--line);
  padding-bottom:24px;
}

/* ===== Articles: 제목 세로쓰기/큰 폰트/줄바꿈 교정 ===== */
/* 혹시 상위에서 세로쓰기 강제했을 경우 완전 차단 */
#articleList, #articleList *{
  writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
}
/* 카드 그리드: 칼럼 최소 폭 보장(다른 페이지에서도 재사용 가능) */
#articleList.grid, #articleList.grid.grid-3{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
}
/* 카드 내부 레이아웃 안정화 */
.article-card .body{padding:8px 4px 10px}
.article-card .card-cover{height:180px}
.article-card .card-cover img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:10px;
}
/* 제목: 자연스러운 줄바꿈 + 크기 조정 */
.article-card h3, .article-card h3 a{
  display:block; font-weight:700;
  font-size:clamp(.95rem, 1.2vw, 1.1rem);
  line-height:1.45; letter-spacing:0;
  white-space:normal; overflow-wrap:anywhere; word-break:keep-all;
  text-decoration:none; color:var(--fg);
}
.article-card .muted{font-size:.9rem; color:var(--muted)}
.article-card .btns{margin-top:.5rem}
@media (max-width:600px){
  #articleList.grid, #articleList.grid.grid-3{grid-template-columns:1fr}
}

/* ---------- Modal (YouTube) ---------- */
.backdrop{position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.55); padding:22px; z-index:30}
.backdrop.show{display:grid}
.modal{width:min(960px, 96vw); background:#000; border-radius:16px; overflow:hidden; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.45)}
.modal .close{position:absolute; right:10px; top:10px}
.video{aspect-ratio:16/9; width:100%; background:#000}
.video iframe{width:100%; height:100%}



/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:28px 0 46px;
  color:color-mix(in hsl, var(--fg) 82%, transparent);
}

/* ---------- Floating theme FAB ---------- */
.theme-fab{
  position:fixed; right:16px; bottom:16px; z-index:9999;
  border:1px solid var(--line); background:var(--card); color:var(--fg);
  width:48px; height:48px; border-radius:999px; box-shadow:0 6px 18px rgba(0,0,0,.25);
  display:grid; place-items:center; font-size:20px;
}
.theme-fab:focus{outline:2px solid var(--brand)}
:root[data-theme="light"] .theme-fab{background:#fff; color:#111; border-color:#e5e7eb}

/* ---------- Store badges (image-only buttons) ---------- */
.store-badges{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.store-img{
  display:block; height:var(--store-img-h); width:auto; cursor:pointer;
  padding:8px; border-radius:12px; border:1px solid transparent;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.store-img:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--brand) 35%, transparent);
  box-shadow:0 6px 18px color-mix(in srgb, var(--brand) 20%, transparent);
}
.store-img:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; border-color:var(--brand);
}
:root[data-theme="light"] .store-img{border-color:#e7e8ee; background:#fff}

/* 리스트 컨테이너: 행 카드 목록 */
#articleList { display:grid; gap:18px; }

/* grid-3가 붙어 있어도 ‘행 리스트’로 보이게 */
#articleList.grid, #articleList.grid.grid-3 { display:grid; }

/* 한 카드(행) — 이미지 왼쪽, 텍스트 오른쪽 */
.article-item{
  display:flex;
  gap:18px;
  align-items:flex-start;
  text-decoration:none;
  color:inherit;
}

/* 이미지 고정 너비(원하면 값만 바꿔서 전체 조절) */
:root{ --article-thumb-w: 220px; }    /* ← 여기 숫자만 조절하면 됨 */
.article-item .thumb{
  width: var(--article-thumb-w);
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #0e0e14;
  border: 1px solid var(--line);
  flex: 0 0 auto;
}
.article-item .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 텍스트 영역 */
.article-item .info{ flex:1 1 auto; min-width:0; }
.article-item .title{
  margin: 6px 0 8px;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.article-item .date{ color:var(--muted); font-size:.95rem; }

/* 모바일에서 세로 스택 */
@media (max-width: 640px){
  .article-item{ flex-direction:column; }
  .article-item .thumb{ width:100%; }
}
/* 두 칼럼은 항상 같은 트랙 높이(=같은 줄에서 같은 높이) */
.grid.grid-2 {
  align-items: stretch; /* 기본이지만 명시해 둠 */
}

/* 카드가 트랙 높이를 꽉 채우도록 */
.grid.grid-2 > .card,
.grid.grid-2 > aside.card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 좌측: 미디어 카드가 세로로 남는 공간이 있어도 보기 좋게 */
.media-carousel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 영상 영역은 16:9 고정 — 위쪽에 배치 */
.media-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;         /* 16:9 고정 */
  border-radius: 12px;
  overflow: hidden;
  background: #0e0e14;
  border: 1px solid var(--line);
}
.media-stage iframe,
.media-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border: 0;
}

/* 우측: 내용이 길어져도 과도하게 늘어나지 않게 로고 크기와 간격 제한 */
.store-badges {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 10px;
}
.store-img {
  height: 56px;     /* 로고 너무 크면 줄이기 (원래 60~90px 쓰던 곳) */
  width: auto;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.store-img:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 20%, transparent);
}

/* 우측 카드 안쪽 여백/타이포 살짝 다듬기 (길이 줄이는데 도움) */
aside.card .game-title { font-size: 24px; margin: 0 0 .35rem; }
aside.card .meta-row { margin: .15rem 0; }
aside.card .btns { margin-top: .6rem; }
#articleList{ display:grid; gap:18px; }

/* 가로형 행 카드 */
.article-item{ display:flex; gap:18px; align-items:flex-start; text-decoration:none; color:inherit; }
:root{ --article-thumb-w: 220px; }
.article-item .thumb{ width:var(--article-thumb-w); aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#0e0e14; border:1px solid var(--line); flex:0 0 auto; }
.article-item .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-item .info{ flex:1 1 auto; min-width:0; }
.article-item .title{ margin:6px 0 8px; font-size:clamp(18px,1.6vw,24px); line-height:1.35; white-space:normal; overflow-wrap:anywhere; word-break:keep-all; }
.article-item .date{ color:var(--muted); font-size:.95rem; }

@media (max-width:640px){
  .article-item{ flex-direction:column; }
  .article-item .thumb{ width:100%; }
}
/* ===== Articles: 가로행 카드 ===== */
#articles #articleList { display: grid; gap: 18px; }

#articles .article-item{
  display: flex; gap: 18px; align-items: flex-start;
  text-decoration: none; color: inherit;
  border: 1px solid var(--line);
  border-radius: 14px; padding: 12px;
  background: var(--card);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#articles .article-item:hover{
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 10px 28px rgba(0,0,0,.15);
}

/* 썸네일: 왼쪽 고정, 16:9 */
#articles .article-item .thumb{
  width: clamp(180px, 32%, 260px);
  aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden;
  background:#0e0e14; border:1px solid var(--line);
  flex: 0 0 auto;
}
#articles .article-item .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* 텍스트 */
#articles .article-item .info{ flex:1 1 auto; min-width:0; }
#articles .article-item .title{
  margin: 6px 0 8px;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.35;
  white-space: normal; overflow-wrap: anywhere; word-break: keep-all;
}
#articles .article-item .date{ color:var(--muted); font-size:.95rem; }

/* 혹시 남아있는 grid-3를 무력화(안전장치) */
#articleList.grid, #articleList.grid.grid-3 { grid-template-columns: 1fr !important; }

/* 글자 세로쓰기 강제 해제(혹시 상위에서 적용돼 있었다면) */
#articles #articleList, #articles #articleList *{
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}
/* ========== Timeline (cp3 스타일) ========== */
#timeline .cp3 { position: relative; }

#timeline .history-title {
  font-size: 22px; font-weight: 800;
  margin: 8px 0 16px;
}

/* 가로 스트립 뷰포트 */
#timeline .frame {
  overflow: hidden;          /* 스크롤은 내부 ul에서 */
  position: relative;
}

/* 가로 리스트 (네이티브 가로 스크롤) */
#timeline .slidee {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;       /* 스크롤바와 살짝 여유 */
}

/* 개별 연도 카드 */
#timeline .slidee > li {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  min-height: 160px;
  min-width: clamp(280px, 42vw, 520px); /* 가로 카드 폭 */
  flex: 0 0 auto;            /* 줄바꿈 없이 가로로 나열 */
}
:root[data-theme="light"] #timeline .slidee > li { background: #fafafb; }

#timeline .slidee > li h4 {
  margin: 0 0 .5rem;
  font-size: 20px; font-weight: 800;
}

#timeline .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--brand);
  margin: .25rem 0 1rem;
}
:root[data-theme="light"] #timeline .dot { background: #5c19cf; }

#timeline .dot.empty { background: transparent; border: 1px solid var(--line); }
#timeline .dot .after { display: none; }

#timeline .timeLine {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .35rem;
}
#timeline .timeLine > li { display: flex; align-items: flex-start; gap: .5rem; }
#timeline .timeLine > li span { min-width: 2.6em; color: var(--muted); font-weight: 600; }
#timeline .timeLine > li p { margin: 0; }

/* 진행바 */
#timeline .scrollbar {
  height: 6px; background: var(--line);
  border-radius: 999px; margin-top: 10px;
  position: relative;
}
#timeline .scrollbar .handle {
  height: 100%; width: 64px;                /* JS로 동적으로 조절 */
  border-radius: 999px; background: var(--brand);
  transform: translateX(0);
  will-change: transform, width;
}
#timeline .scrollbar .mousearea { height: 10px; margin-top: -2px; }

/* 드래그 커서 느낌(옵션) */
#timeline .frame { cursor: grab; }
#timeline .frame:active { cursor: grabbing; }

/* 반응형 살짝 */
@media (max-width: 768px) {
  #timeline .slidee > li { padding: 14px; }
  #timeline .slidee > li h4 { font-size: 18px; }
}

/* === Timeline: 강제 가로 스트립 === */
#timeline .cp3 .frame > ul#historySlidee {
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
#timeline .cp3 .frame > ul#historySlidee > li {
  flex: 0 0 auto !important;
  min-width: clamp(280px, 42vw, 520px) !important;
  scroll-snap-align: start;
}
.tl-del{
  margin-left:.5rem;
  padding:.2rem .5rem;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  border-radius:8px;
  cursor:pointer;
}
.tl-del:hover{ border-color:var(--brand); color:var(--brand); }

/* 네이티브 가로 스크롤바 숨기기 */
#timeline .frame { overflow: hidden; } /* 부모는 감춤 */
#timeline .frame > ul#historySlidee{
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;     /* IE/Edge */
  scrollbar-width: none;        /* Firefox */
  -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 유지 */
}
#timeline .frame > ul#historySlidee::-webkit-scrollbar{
  display: none;                /* Chrome/Safari */
}
/* ===== Contact 폼 레이아웃 고정 ===== */
.contact-form{
  /* 카드 느낌은 유지하고, 폼 자체를 2열 그리드로 */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;                   /* 행/열 간격 */
  padding: 18px;                    /* 카드 안쪽 여백이 너무 크면 조절 */
}

/* 상단 4개 필드(이름/이메일/타입/폰)는 각 1칸씩 차지 */
.contact-form .grid,
.contact-form .grid.grid-2{
  display: contents;                /* 내부 div만 배치에 참여(겉그리드 제거) */
}

/* “문의 내용” 영역은 2칸 모두 차지 = 전체 폭 */
.contact-form > div:has(textarea){
  grid-column: 1 / -1;
}

/* 라벨/인풋 공통 톤 정리 */
.contact-form label{
  display:block; font-weight:800; margin:0 0 .4rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  background: color-mix(in hsl, var(--bg) 90%, transparent);
  border:1px solid var(--line);
  color:var(--fg);
  padding:.9rem 1rem;
  border-radius:.75rem;
  font:inherit;
}
.contact-form textarea{ min-height: 220px; resize: vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color: color-mix(in hsl, var(--muted) 85%, transparent); }

/* 버튼 줄은 전체 폭에서 시작(왼쪽 정렬) */
.contact-form .btns{
  grid-column: 1 / -1;
  margin-top: .3rem;
}

/* 섹션 배경은 살짝만 */
.contact-section{
  background: color-mix(in hsl, var(--bg) 96%, transparent);
  padding: 56px 0 72px;
}

/* 반응형: 좁아지면 1열로 */
@media (max-width: 900px){
  .contact-form{
    grid-template-columns: 1fr;
  }
}
/* 기본 .logo 스타일은 그대로 두고, 아이콘 버전만 보강 */
.logo-with-icon{
  display:inline-flex;            /* 텍스트와 아이콘 가로 정렬 */
  align-items:center;
  gap:8px;                        /* 로고-텍스트 간격 */
  font-weight:800;                /* 기존 굵기 유지용 (필요 시 제거) */
}

.logo-with-icon img{
  width:24px; height:24px;        /* 로고 크기 */
  object-fit:contain; display:block;
}

/* 화면 넓을 때 조금 키우고 싶다면 */
@media (min-width:768px){
  .logo-with-icon img{ width:28px; height:28px; }
}
.logo-with-icon {
  display: flex;
  align-items: center;
}

/* a 링크를 flex 정렬 */
.logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

/* 이미지 크기 고정 */
.logo-link img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

/* 글씨 스타일 */
.logo-link span {
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
}

/* hover 효과 (선택사항) */
.logo-link:hover {
  opacity: 0.9;
  transform: scale(1.02);
  transition: all 0.2s ease;
}