/*
 * MAIN-001 메인 화면 (game-site 좌우 2단 전체화면) / MAIN-002 게임 방법 팝업
 *  - 배치를 game-site 실제 배포본과 동일하게: 좌 히어로(타이틀·계정) / 우 메뉴 카드.
 *  - 뒷배경(오피스맵) 제거, 순수 다크 네이비. 전체 요소 크게.
 */

.main-screen {
  position: absolute; inset: 0;
  overflow: hidden; isolation: isolate;
  /* 오피스맵 배경 + 다크 오버레이(콘텐츠 가독성 확보). game-site .main-bg 방식 */
  background:
    linear-gradient(90deg, #f4f1eeef 0%, #f4f1eee2 42%, #f4f1ee96 70%, #f4f1eec8 100%),
    url('../assets/img/office-map-bg.webp') center/cover no-repeat;
  color: var(--gs-text);
  font-family: var(--font);
}
.main-screen::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 72% 46%, transparent 0 24%, #f4f1ee70 58%, #f4f1eeea 100%);
  pointer-events: none;
}

/* 상단 브랜드 바 */
/* 크기 확대(발주처 요청 2026-09-08 슬라이드 3: 전체적으로 UI 크기 다 키우기).
   메인 화면은 대부분 clamp() 로 화면 폭을 따라가므로, 상한과 하한을 함께 올렸다. */
.main-screen__bar {
  position: absolute; top: 0; left: 0; right: 0; height: 9vh; min-height: 76px;
  padding: 0 4vw; display: flex; align-items: center; justify-content: space-between;
  /* 발주처 0910 S3: 상단 '바' 블록만 제거(로고·관리자 버튼은 그 자리에 그대로 둔다).
     배경·테두리·블러를 없애고 위치·정렬만 남긴다. */
  z-index: 3;
}
/* 로고 그림(발주처 요청 10). 배경을 투명하게 다듬어 그대로 올린다(2026-09-01).
   크기는 로그인 화면과 같다. 기획서에서 두 화면의 로고 도형이 1.027 x 0.566 in 로
   같은데 메인만 작게 그려져 있었다(발주처 지적 2026-09-09). */
.main-screen__logo { display: inline-flex; align-items: center; }
.main-screen__logo img { display: block; height: clamp(40px, 4.2vw, 64px); width: auto; }
.main-screen__admin {
  padding: 11px 24px; border-radius: 999px; font-size: clamp(14px, 1.1vw, 17px); font-weight: 700;
  background: #ffffffaa; border: 1px solid var(--gs-line); color: var(--gs-cyan-soft); cursor: pointer;
  font-family: inherit; transition: transform .18s ease, background .18s ease;
}
.main-screen__admin:hover:not(:disabled) { background: #f0ebe7; transform: translateY(-1px); }
.main-screen__admin:disabled { opacity: .5; cursor: not-allowed; }

/* 세로 한 줄 콘텐츠 (사용자 지시 2026-09-09: 좌우 2단 → 위아래 한 줄).
   창이 낮으면 넘칠 수 있어 overflow: auto 로 스크롤을 허용한다. */
.main-content {
  /* 위 여백은 상단 바(9vh, 최소 76px)를 피할 만큼 확보한다.
     로고를 키운 뒤 세로 가운데 정렬만으로는 로고 윗부분이 바에 가렸다. */
  width: min(760px, 88vw); height: 100%; margin: 0 auto; padding: max(4vh, 84px) 0 3vh;
  display: grid; grid-template-columns: 1fr;
  gap: 2vh; justify-items: center;
  /* 내용이 세로로 넘칠 때 가운데 정렬이면 초과분이 '위로' 밀려 로고가 잘린다(발주처 스샷).
     safe 를 쓰면 넘칠 때만 위 기준으로 붙어 잘리지 않고, 남을 때는 그대로 가운데다. */
  align-content: center;
  align-content: safe center;
  overflow: auto;
}

/* 위: 히어로. 게임명은 로고 그림이다(글자 제목은 로고가 대신한다). */
.hero-copy {
  padding: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.hero-copy .game-logo {
  /* 1.3배(사용자 지시 2026-09-09): 470 → 611 */
  display: block; width: min(100%, 611px); height: auto;
  filter: drop-shadow(0 14px 40px #2a232030);
}
.user-card {
  width: min(470px, 100%); margin-top: 18px; text-align: center;
  display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center;
  padding: 17px 24px; border: 1px solid #e6ded966; border-radius: 16px;
  background: #faf7f5c9; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 16px 36px #2a232020;
}
/* 닉네임 변경 버튼(발주처 0918 저녁): 카드 오른쪽에 연필. 글자 칸은 가운데 그대로 두고 버튼만 오른쪽 끝에 띄운다. */
.user-card { position: relative; }
.user-card__edit {
  /* 세로 가운데는 transform 이 아니라 margin 으로 잡는다. transform 으로 잡으면 theme.css 의
     button:active(translateY(1px) scale) 에 밀려 누르는 순간 22px 아래로 뚝 떨어졌다(발주처 0921). */
  position: absolute; right: 14px; top: 50%; margin-top: -22px;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: pointer;
  filter: drop-shadow(0 2px 6px #2a232028);
}
.user-card__edit img { display: block; width: 100%; height: 100%; }
.user-card__edit:hover { transform: scale(1.06); }
.user-card b { display: block; font-size: clamp(17px, 1.35vw, 22px); color: var(--gs-text); font-weight: 800; }
.user-card span { display: block; color: var(--gs-muted); font-size: clamp(13px, 1vw, 16px); margin-top: 5px; }

/* 아래: 메뉴 카드 (game-site .main-menu) */
.main-menu {
  width: 100%;
  display: grid; gap: 14px; padding: 22px;
  border: 1px solid #e6ded94a; border-radius: 22px;
  background: linear-gradient(145deg, #ffffffd9, #ffffffe8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 28px 70px #2a23203a;
}
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* 메뉴 버튼 (아이콘칩 + 제목 + 설명 + 화살표) */
.main-btn {
  min-height: 92px; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  display: grid; grid-template-columns: 56px 1fr 26px; align-items: center; gap: 14px;
  border: 1px solid #e6ded9; border-radius: 16px; padding: 16px;
  background: linear-gradient(135deg, #ffffff, #f4f1ee); color: #1f2429;
  box-shadow: inset 0 1px #1f242906, 0 6px 18px #2a232019;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.main-btn:hover { transform: translateY(-2px); border-color: #c00026; background: linear-gradient(135deg, #f0ebe7, #ffffff); box-shadow: 0 12px 28px #2a232020, 0 0 0 1px #e9002d44; }
.main-btn:active { transform: translateY(0); }
.main-btn:disabled { opacity: .5; cursor: not-allowed; }
.main-btn__icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: #1f242909; font-weight: 900; font-size: 23px; }
.main-btn__text { min-width: 0; }
.main-btn__text b { display: block; font-size: clamp(17px, 1.4vw, 22px); font-weight: 800; letter-spacing: -.01em; }
.main-btn__text small { display: block; margin-top: 3px; font-size: clamp(13px, 1.05vw, 16px); font-weight: 500; color: #6f757c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-btn__chev { text-align: center; font-size: 26px; color: #c00026; }
/* 화살표(›)·게임방법 슬라이드 화살표(‹›)는 기호라 SCDream 이 아니라 이전 폰트로 그린다.
   SCDream 은 이 글리프를 크고 벌어진 모양으로 렌더해 발주처가 '화살표가 바뀌었다'고 지적(0910). */
.main-btn__chev, .howto__nav { font-family: "Pretendard", system-ui, "Malgun Gothic", sans-serif; }

/* 시작하기(primary) — 특히 크게 */
.main-btn--start { min-height: 118px; border-color: #e9002d; background: linear-gradient(135deg, #e9002d, #ff7a01); color: #ffffff; box-shadow: 0 14px 34px #e9002d35; }
.main-btn--start:hover { background: linear-gradient(135deg, #ff1a45, #ff9124); }
.main-btn--start .main-btn__icon { width: 62px; height: 62px; background: #ffffff2e; font-size: 27px; }
.main-btn--start .main-btn__text b { font-size: clamp(22px, 2vw, 31px); }
.main-btn--start .main-btn__text small { color: #ffe4e9; font-size: clamp(14px, 1.1vw, 17px); }
.main-btn--start .main-btn__chev { color: #ffe4e9; font-size: 29px; }

/* 하단 푸터 */
.main-footer {
  position: absolute; bottom: 0; left: 0; right: 0; height: 6vh; min-height: 44px;
  padding: 0 4vw; display: flex; align-items: center; justify-content: space-between;
  /* 발주처 0910 S3·S1: 하단 바와 그 안의 'SK hynix Security Academy' 영문 텍스트 제거.
     mainScreen.js 에서 footer 마크업 자체를 없앤다. 이 규칙은 남은 참조 안전용. */
  display: none;
}

@media (max-width: 940px) {
  .main-content { gap: 18px; padding: 4vh 0; align-content: start; }
  .hero-copy .game-logo { width: min(100%, 546px); }   /* 420 x 1.3 */
  .main-btn--start { min-height: 108px; }
}

/* 세로 한 줄로 바꾸면서 창이 낮으면 메뉴가 아래로 잘린다.
   높이가 900 이하일 때 로고·여백·버튼을 줄여 한 화면에 담는다. */
@media (max-height: 1200px) {
  .main-content { padding: max(2.5vh, 78px) 0 2.5vh; gap: 1.4vh; }
  .hero-copy .game-logo { width: min(100%, 468px); }   /* 360 x 1.3 */
  .user-card { margin-top: 10px; padding: 11px 18px; }
  .main-menu { padding: 14px; gap: 10px; }
  .menu-grid { gap: 10px; }
  .main-btn { min-height: 72px; padding: 12px; }
  .main-btn--start { min-height: 88px; }
  .main-btn--start .main-btn__icon { width: 52px; height: 52px; }
}
/* 노트북(≤780) 은 로고·버튼을 한 단계 더 낮춰 스크롤 없이 담는다. */
@media (max-height: 780px) {
  .main-content { padding: 58px 0 10px; gap: 8px; }
  .hero-copy .game-logo { width: min(100%, 360px); }
  .user-card { margin-top: 6px; padding: 8px 16px; }
  .main-menu { padding: 10px; gap: 8px; }
  .menu-grid { gap: 8px; }
  .main-btn { min-height: 58px; padding: 9px; }
  .main-btn__icon { width: 46px; height: 46px; }
  .main-btn--start { min-height: 70px; }
  .main-btn--start .main-btn__icon { width: 48px; height: 48px; }
}
@media (max-height: 740px) {
  .main-content { padding: 50px 0 8px; gap: 7px; }
  .hero-copy .game-logo { width: min(100%, 330px); }
  .main-btn { min-height: 54px; }
  .main-btn--start { min-height: 66px; }
}


/* ── MAIN-002 게임 방법 팝업 ───────────────────────────────── */

.howto-back {
  font-family: var(--font-game);
  position: absolute; inset: 0;
  background: rgba(42,35,32,.28);
  display: flex; align-items: center; justify-content: center;
  z-index: 20; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* 팝업이 목업 프레임 전체를 덮는다.
   위치(좌표·크기)는 화면기획서 목업 그대로 두고 보이는 방식만 다듬는다. */
.howto {
  position: relative;
  container-type: inline-size;
  /* 화면을 꽉 채우면 답답해서 조금 줄였다(88vh → 80vh).
     글자·여백은 전부 cqw 라 창 크기를 줄이면 같은 비율로 함께 줄어든다. */
  width: min(82vw, calc(80vh * 680 / 512));
  aspect-ratio: 680 / 512;
  color: var(--gs-text);
  background:
    radial-gradient(80% 60% at 12% 0%, #f0ebe740 0%, transparent 60%),
    linear-gradient(145deg, #fffffff2, #fffffff8);
  border: 1px solid var(--gs-line);
  border-radius: 22px;
  box-shadow: 0 28px 70px #2a232040, inset 0 1px #1f24290b;
  overflow: hidden;
}
/* 상단에 얇은 강조선 — 다른 화면의 시안/주황 악센트와 같은 결 */
.howto::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--gs-orange), var(--gs-cyan) 45%, transparent);
  opacity: .75;
}
.howto > * { position: absolute; }

/* x=22 y=24 w=180 h=32 */
.howto__title {
  left: 3.24%; top: 4.69%; width: 26.47%; height: 6.25%;
  display: flex; align-items: center; gap: .8cqw;
  font-size: 3.53cqw; font-weight: 800; letter-spacing: -.02em;
}
/* 제목 앞 세로 악센트 바 */
.howto__title::before {
  content: ''; flex: none; width: .45cqw; height: 68%;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--gs-cyan), #e9002d);
  box-shadow: 0 0 10px #e9002d66;
}

/* x=536 y=28 w=106 h=28 */
.howto__tutorial {
  left: 78.82%; top: 5.47%; width: 15.59%; height: 5.47%;
}

/* x=522 y=458 w=120 h=34 */
.howto__close {
  left: 76.76%; top: 89.45%; width: 17.65%; height: 6.64%;
}

/* 버튼·탭 배색은 dialog.css(.dlg__btn) / main-screen(.main-btn) 과 같은
   다크 글래스 팔레트를 쓴다. 이 팝업만 예전 플랫(밝은) 팔레트를 쓰고 있었다. */
.howto__btn {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #d3c8c1;
  border-radius: 10px;
  background: #f0ebe7;
  color: var(--gs-text); font-family: inherit; font-weight: bold; font-size: 2.06cqw;
  text-shadow: none;
  cursor: pointer;
  box-shadow: none;
}
.howto__btn:hover:not(:disabled) { background: #f0ebe7; border-color: #c00026; }
.howto__btn:active { transform: translateY(2px); box-shadow: none; }
.howto__btn:disabled { opacity: .5; cursor: not-allowed; }
/* 튜토리얼 진행이 이 팝업의 주 동작 — 다른 화면의 주버튼과 같은 시안 그라디언트 */
.howto__tutorial {
  background: linear-gradient(135deg, #e9002d, #ff7a01);
  border-color: #c00026; color: #ffffff;
}
.howto__tutorial:hover:not(:disabled) {
  background: linear-gradient(135deg, #c00026, #e06a00); border-color: #c00026;
}

/* 탭 x=22/178/334/490 y=72 w=140 h=28
   본문과 붙은 '한쪽만 둥근 탭' 대신, 본문 위에 얹힌 독립 탭으로 바꿨다.
   어느 탭을 골라도 본문과의 이음새가 어긋나지 않는다. */
.howto__tab {
  top: 14.06%; width: 20.59%; height: 5.47%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #f0ebe7;
  border-radius: 9px;
  background: #f4f1ee99;
  color: #6f757c;
  font-family: inherit; font-weight: bold; font-size: 2.06cqw;
  letter-spacing: -.02em;
  cursor: pointer;
}
.howto__tab:hover:not(.howto__tab--on) {
  color: #1f2429; border-color: #d3c8c1; background: #f4f1ee;
}
/* 목업 좌표(x=22~630)는 본문(x=26~642)보다 왼쪽으로 4px 나와 있었다.
   탭이 어두울 땐 티가 안 났지만 선택 탭을 시안으로 채우니 드러나서,
   폭은 그대로 두고 양 끝을 본문에 맞춰 간격만 고르게 다시 잡았다. */
.howto__tab--1 { left: 3.82%; }
.howto__tab--2 { left: 27.15%; }
.howto__tab--3 { left: 50.49%; }
.howto__tab--4 { left: 73.82%; }
/* 선택된 탭만 시안으로 채우고 아래로 살짝 빛을 흘려 본문과 이어 보이게 한다 */
.howto__tab--on {
  background: linear-gradient(135deg, #e9002d, #ff7a01);
  border-color: #c00026; color: #ffffff;
  box-shadow: 0 0 0 1px #ff7a0133, 0 6px 18px #e9002d3d;
}
.howto__tab:focus-visible { outline: 2px solid var(--gs-cyan); outline-offset: 2px; }

/* 본문 영역: 탭 아래 ~ 닫기 버튼 위 */
/* 탭 아래 끝이 19.53% 다. 발주처 요청 0908 슬라이드 5: 탭과 본문 사이를 더 벌린다. */
.howto__body {
  left: 3.82%; top: 22.5%; width: 90.59%; height: 64.2%;
  border: 1px solid #f0ebe7;
  border-radius: 12px;
  background: linear-gradient(180deg, #faf7f5cc, #f4f1eecc);
  box-shadow: inset 0 1px #1f242908;
  padding: 2.4% 1.8%;
  display: flex; flex-direction: column; gap: 2.2%;
  overflow: auto;
}

/* 본문 한 줄 x=26 w=616 h=52 — 왼쪽 시안 악센트가 붙은 카드 */
.howto__row {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex; align-items: center; gap: 1.6cqw;
  border: 1px solid #f0ebe7;
  border-radius: 10px;
  background: linear-gradient(100deg, #f4f1ee 0%, #faf7f5 40%);
  color: var(--gs-text);
  padding: 0 1.6cqw 0 2.2cqw;
  overflow: hidden;
}
.howto__row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .42cqw;
  background: linear-gradient(180deg, var(--gs-cyan), #e9002d);
}
.howto__row:hover { border-color: #d3c8c1; background: linear-gradient(100deg, #f4f1ee 0%, #ffffff 40%); }
/* 번호 뱃지 w=28 h=28 — 컨테이너 크기에 따라 같이 커지도록 cqw 로 */
.howto__no {
  flex: none;
  width: 3.4cqw; height: 3.4cqw;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #c00026;
  border-radius: 50%;
  background: #ffffff;
  color: var(--gs-cyan); font-weight: 900; font-size: 1.9cqw;
}
.howto__text { font-size: 2.06cqw; line-height: 1.45; letter-spacing: -.02em; font-weight: bold; }

/* 조작 방법 탭: 좌우 2단 x=26/354 y=146 w=288 h=287 */
.howto__body--ctrl { flex-direction: row; gap: 2.4%; }
.howto__panel {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 1.2cqw;
  border: 1px solid #f0ebe7;
  border-radius: 10px;
  background: linear-gradient(180deg, #f4f1ee 0%, #faf7f5 45%);
  color: var(--gs-text);
  padding: 1.6cqw;
  overflow: hidden;
}
.howto__panel::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: .3cqw;
  background: linear-gradient(90deg, var(--gs-cyan), transparent);
}
.howto__panel-head { display: flex; align-items: center; gap: 1.2cqw; align-self: flex-start; }
.howto__panel-desc { align-self: flex-start; font-size: 1.91cqw; letter-spacing: -.02em; color: #6f757c; }
/* 플레이 영상 자리 x=38/368 y=236 w=262 h=182. 실제 영상(<video>)은 자리를 꽉 채우고,
   영상이 없는 자리(.howto__video--empty)만 예전처럼 빗금 상자로 남는다. */
.howto__video {
  flex: 1; width: 100%; min-height: 0;
  border-radius: 8px;
  object-fit: cover; background: #1f2429;
  /* 영상 화면이 팝업 바탕과 같은 밝은 색이라 경계가 안 보였다(발주처 0921).
     테두리와 그림자로 영역을 띄운다. */
  border: 2px solid #a9a09a;
  box-shadow: 0 10px 26px rgba(42,35,32,.32);
}
.howto__video--empty {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed #e6ded9;
  background: repeating-linear-gradient(45deg, #f0ebe7 0 10px, #faf7f5 10px 20px);
  color: var(--gs-muted); font-size: 2.06cqw;
}

@media (max-width: 820px) {
  .main-screen__title { font-size: 4.41cqw; }
  .main-screen__btn { font-size: 2.06cqw; }
  .main-screen__btn--start { font-size: 2.50cqw; }
  .howto__text, .howto__panel-desc { font-size: 1.76cqw; }
}

.main-screen__title .tt-accent { color: var(--gs-orange); margin-left: .28em; }


/* game-site 메뉴 버튼 내부 구성(배치 유지, 내부만 아이콘+제목+설명+화살표) */
.main-screen__btn .msb__icon {
  width: 4.6cqw; height: 4.6cqw; display: grid; place-items: center;
  border-radius: 1.1cqw; background: #1f242909;
  font-weight: 900; font-size: 2.2cqw; color: #1f2429;
}
.main-screen__btn .msb__text { min-width: 0; }
.main-screen__btn .msb__text b { display: block; font-size: 2.35cqw; font-weight: 800; letter-spacing: -.01em; }
.main-screen__btn .msb__text small {
  display: block; margin-top: .2cqw; font-size: 1.5cqw; font-weight: 500;
  color: #6f757c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.main-screen__btn .msb__chev { text-align: center; font-size: 2.6cqw; color: #c00026; }

/* 시작하기(primary): 아이콘칩 밝게, 설명 밝게 */
.main-screen__btn--start .msb__icon { background: #1f242914; }
.main-screen__btn--start .msb__text small { color: #ffe4e9; }
.main-screen__btn--start .msb__text b { font-size: 2.7cqw; }
.main-screen__btn--start .msb__chev { color: #ffe4e9; }

/* 비활성(관리자 모드 등)은 기존 그대로 텍스트만 → 내부요소 없으니 영향 없음 */

/* gs-primary-hover: 시안 주버튼 공통 hover */

/* 미션 유형 탭: 카드 에셋 5장을 가로 스크롤 슬라이드로 보여준다.
   5장을 한 줄에 나눠 담던 방식은 카드(720x940)가 본문 폭의 1/5 로 줄어 글씨가 안 읽혔다.
   이제는 카드 높이를 본문 높이에 맞추고 넘치는 만큼 옆으로 흘려 보낸다(한 화면에 2~3장).
   본문 자체는 스크롤하지 않는 액자이고, 실제로 움직이는 것은 안쪽 .howto__track 이다.
   좌우 버튼을 본문에 붙여야 트랙과 함께 밀려나지 않기 때문이다. */
.howto__body--cards {
  display: block; padding: 0; overflow: hidden;
}
.howto__track {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 2cqw;
  /* 좌우 여백은 버튼 자리다. 첫·마지막 카드가 버튼에 가리지 않게 버튼 폭만큼 준다. */
  padding: 1.4cqw 7.5cqw;
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  /* 가로 스크롤바가 카드 아래를 잘라먹어 숨긴다. 넘기는 수단은 버튼·휠·터치패드로 충분하다. */
  scrollbar-width: none;
}
.howto__track::-webkit-scrollbar { display: none; }
.howto__card {
  flex: 0 0 auto; height: 100%; width: auto;
  scroll-snap-align: center;
  object-fit: contain; display: block;
  border-radius: 1cqw;
  filter: drop-shadow(0 .8cqw 1.6cqw #2a232033);
  transition: transform .18s ease, filter .18s ease;
  -webkit-user-select: none; user-select: none;
}
.howto__card:hover { transform: translateY(-.6cqw); filter: drop-shadow(0 1.4cqw 2.2cqw #2a232040); }

/* 좌우 넘김 버튼 — 카드 위에 얹힌 원형 */
.howto__nav {
  /* .howto > * 의 absolute 는 본문까지만 적용된다. 버튼은 본문의 자식이라 여기서 직접 잡는다. */
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 5.6cqw; height: 5.6cqw;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #d3c8c1; border-radius: 50%;
  background: #faf7f5e0; color: #1f2429;
  font-family: inherit; font-size: 3.4cqw; font-weight: 900; line-height: 1;
  cursor: pointer; box-shadow: 0 .6cqw 1.4cqw #2a23202d;
  transition: background .18s ease, border-color .18s ease;
}
.howto__nav:hover:not(:disabled) { background: #f0ebe7; border-color: #c00026; }
/* 발주처 요청 2026-09-08 슬라이드 5: 눌러도 버튼이 아래로 움직이지 않고 색만 바뀐다.
   theme.css 의 공통 눌림 반응(translateY)이 여기에도 걸리므로 원래의 세로 중앙 정렬
   transform 을 그대로 다시 지정해 덮는다. */
.howto__nav:active:not(:disabled) {
  transform: translateY(-50%);
  background: linear-gradient(135deg, #e9002d, #ff7a01);
  border-color: #c00026; color: #ffffff;
}
.howto__nav:disabled { opacity: .25; cursor: default; }
.howto__nav--prev { left: 1cqw; }
.howto__nav--next { right: 1cqw; }