@charset "utf-8";

/* ============================================================
   OSDCYB - 공통 스타일
   ============================================================ */

:root {
  --bg:          #000000;   /* 헤더·푸터 배경 (검정) */
  --fg:          #ffffff;   /* 기본 글자 (흰색) */
  --fg-dim:      #8b8b8b;   /* 비활성 메뉴, 저작권 */
  --header-h:    77px;      /* 헤더 전체 높이 */
  --footer-h:    72px;      /* 푸터 높이 (본문 여백 기본값, 실제 높이는 JS 가 맞춤) */

  /* 투어별 색상 : Diary 행과 멤버 상세 배경이 같이 씁니다 */
  --tour-ishigaki:    #e6e6e6;   /* 2026 Ishigaki */
  --tour-oslob26:     #f9caf0;   /* 2026 Oslob & Moalboal */
  --tour-malapascua:  #a5f0ae;   /* 2025 Malapascua */
  --tour-okinawa:     #fcd34a;   /* 2024 Okinawa */
  --tour-moalboal:    #35b13f;   /* 2023 Moalboal */
  --tour-daecheongdo: #fba51f;   /* 2019 Daecheongdo */
  --tour-bohol:       #7ce8fa;   /* 2019 Bohol & Oslob */
  --tour-coron:       #8fe0d2;   /* 2027 Coron (예정) */
  --tour-yonaguni:    #a9c4f5;   /* 2028 Yonaguni (예정) */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* 헤더·푸터가 화면에 고정이라 본문이 가리지 않게 위아래 여백을 둡니다.
     실제 높이는 각 스크립트가 다시 맞춥니다. */
  padding-top: var(--header-h);
  padding-bottom: var(--footer-h);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Malgun Gothic", "맑은 고딕", sans-serif;
  color: #1c1c1c;
  background: var(--cream);
}

/* ============================================================
   Header
   ============================================================ */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: auto;                   /* 메뉴가 줄바꿈되면 내용만큼만 늘어남 */
  /* 주의 : 여기에 var(--header-h) 를 쓰면 안 됩니다.
     헤더 스크립트가 --header-h 에 자기 높이를 써넣기 때문에 순환이 생겨,
     높이가 한 번 커지면 그 값에 영구히 갇힙니다. 고정값을 씁니다. */
  min-height: 77px;
  padding: 14px 0 5px;            /* 아래 = 네비게이터 밑 여백 */
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;                       /* 1행과 2행 사이 = 선 없이 간격으로만 */
}

/* ---------- 1행 : 가운데 로고 + 우측 버튼 ---------- */

.header__top {
  position: relative;
  width: 100%;
  max-width: 1200px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__logo {
  display: inline-flex;          /* 로고 이미지와 글자를 한 줄로 */
  align-items: center;
  gap: 9px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--fg);
  text-decoration: none;
}

/* OSDCYB 글자 왼쪽의 흰 로고 (01_Media/04_Page/00_Logo_white.png) */
.header__logo-img {
  display: block;
  height: 30px;
  width: auto;
}

.header__auth {
  position: absolute;             /* 로고를 정확히 가운데 두기 위해 */
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
}

/* 아이콘 버튼 (비회원 = 로그인, 회원 = 사람 모양) */
.header__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
}

.header__icon:hover { color: var(--fg-dim); }

/* ---------- 회원 : 사람 아이콘 아래로 열리는 메뉴 ---------- */

.header__user { position: relative; }

.header__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;                  /* 아이콘 오른쪽 끝에 맞춤 */
  z-index: 10;
  min-width: 130px;
  padding: 6px 0;
  border-radius: 3px;
  background: #3a3a3a;       /* 진한 회색 바탕 */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

.header__menu-item {
  display: block;
  width: 100%;
  padding: 9px 16px;
  border: 0;
  background: none;
  color: var(--fg);          /* 흰 글자 */
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.header__menu-item:hover { background: #4e4e4e; }

/* ---------- 2행 : 가운데 네비게이션 ---------- */

.header__nav { width: 100%; }

.header__list {
  margin: 0;
  padding: 0 24px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;                /* 화면이 좁으면 줄바꿈 */
  align-items: center;
  justify-content: center;
  gap: 4px 26px;
}

.header__link {
  display: inline-block;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  color: var(--fg-dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
}

.header__link:hover { color: var(--fg); }
.header__app-only[hidden] { display: none !important; }   /* CHAT : 앱 안에서만 */

/* 현재 보고 있는 페이지 = 아래 밑줄 */
.header__link.is-active {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

/* ---------- 로그인 상태별 표시 ----------
   header 의 data-auth 값에 따라 전환됩니다.
     data-auth="guest"  : 비회원
     data-auth="member" : 로그인한 회원
   ------------------------------------------------- */

.header[data-auth="guest"]  [data-auth-only="member"] { display: none; }
.header[data-auth="member"] [data-auth-only="guest"]  { display: none; }

/* ---------- 모바일 : 로고 작게 + 메뉴 줄바꿈 ---------- */

@media (max-width: 700px) {
  :root { --header-h: 73px; }

  /* min-height 를 두면 남는 높이가 위아래로 퍼져 간격이 다시 벌어지므로 0 */
  .header { min-height: 0; padding: 16px 0 6px; gap: 3px; }
  .header__top { padding: 0 14px; }
  .header__logo { font-size: 17px; letter-spacing: 0.06em; gap: 7px; }
  .header__logo-img { height: 24px; }

  .header__auth { right: 14px; }
  .header__icon { width: 28px; height: 28px; }
  .header__menu-item { padding: 10px 14px; font-size: 11.5px; }

  .header__list { padding: 0 14px; gap: 3px 16px; }
  .header__link { font-size: 11.5px; letter-spacing: 0.06em; }
}

@media (max-width: 420px) {
  :root { --header-h: 70px; }
  .header__logo { font-size: 15px; gap: 6px; }
  .header__logo-img { height: 21px; }
  .header__list { gap: 2px 13px; }
  .header__link { font-size: 11px; letter-spacing: 0.04em; }
}

/* ---------- 아직 준비 중 : Not yet 팝업 (헤더 스크립트가 만듦) ---------- */

.notyet {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2000;                  /* 헤더(1000)·푸터·갤러리 인트로보다 위 */
  padding: 14px 30px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.notyet.is-shown {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---------- 로그인 팝업 (헤더 파일 안의 #loginModal) ----------
   안쪽 상자·입력칸·버튼 모양은 아래 Login 구역의 .login__* 를 그대로 씁니다 */

.authmodal {
  position: fixed;
  inset: 0;
  z-index: 1500;                  /* 헤더(1000)·푸터(900) 위, Not yet 팝업(2000) 아래 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(0, 0, 0, 0.6);
  overflow-y: auto;
}

.authmodal[hidden] { display: none; }

.authmodal__box { position: relative; }

.authmodal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  color: #888888;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.authmodal__close:hover { color: #1c1c1c; }

.authmodal__notice p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #3a3a3a;
  text-align: center;
}

.authmodal__help {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: #999999;
  text-align: center;
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
  /* 헤더와 마찬가지로 화면에 고정. 본문 아래 여백은 푸터 스크립트가 맞춥니다. */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 900;

  min-height: 0;
  padding: 10px 24px;
  background: var(--bg);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  align-items: center;       /* 전부 가운데 정렬 */
  justify-content: center;
  gap: 7px;
  text-align: center;
}

/* 로그인한 회원 : Become a Member! 없이 한 줄만 */
.footer[data-auth="member"] { gap: 0; }

.footer[data-auth="member"] [data-auth-only="guest"] { display: none; }

/* Become a Member! = 테두리만 있는 버튼 */
.footer__join {
  display: inline-block;
  padding: 7px 20px;
  border: 1px solid var(--fg);
  border-radius: 3px;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
}

.footer__join:hover {
  background: var(--fg);     /* 마우스 올리면 흰 바탕으로 반전 */
  color: var(--bg);
}

.footer__copy {
  margin: 0;
  color: var(--fg-dim);
  font-size: 12px;
  letter-spacing: 0.04em;
}

@media (max-width: 700px) {
  :root { --footer-h: 66px; }

  .footer { padding: 9px 16px; gap: 6px; }
  .footer__join { padding: 6px 16px; font-size: 11.5px; }
  .footer__copy { font-size: 11px; }
}

/* ============================================================
   Login (07_Login.html)
   ============================================================ */

.login {
  /* 헤더·푸터를 뺀 나머지를 채웁니다 */
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
  padding: 60px 24px;
  display: flex;
  align-items: center;
  justify-content: center;

  /* 배경 : 나중에 여행 사진으로 바꿀 자리입니다.
     background-image: url('...');  를 추가하면 그라데이션 위로 깔립니다. */
  background: linear-gradient(160deg, #000000 0%, #1c1c1c 55%, #3a3a3a 100%);
}

.login__box {
  width: 100%;
  max-width: 360px;
  padding: 36px 30px 30px;
  border-radius: 4px;
  background: #ffffff;
  color: #1c1c1c;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.login__title {
  margin: 0 0 26px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
}

/* ---------- 입력칸 ---------- */

.login__field { margin-bottom: 16px; }

.login__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #555555;
}

.login__input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d5d5d5;
  border-radius: 3px;
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  color: #1c1c1c;
}

.login__input:focus {
  outline: none;
  border-color: #1c1c1c;
}

/* ---------- 오류 문구 ---------- */

.login__error {
  margin: 0 0 14px;
  color: #c0392b;
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------- 로그인 버튼 ---------- */

.login__submit {
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  border: 0;
  border-radius: 3px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.login__submit:hover { background: #333333; }

/* ---------- 가입 신청 링크 ---------- */

.login__signup {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid #ececec;
  font-size: 12.5px;
  color: #777777;
  text-align: center;
}

.login__signup a {
  color: #1c1c1c;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #1c1c1c;
}

@media (max-width: 700px) {
  .login { padding: 40px 16px; }
  .login__box { padding: 30px 22px 26px; }
}

/* ============================================================
   Sign Up (09_Sign_Up.html)
   ============================================================ */

.signup {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

.signup__title {
  margin: 0 0 40px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
}

/* ---------- 입력 묶음 ---------- */

.signup__group {
  margin-bottom: 34px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ececec;
}

.signup__group:last-of-type { border-bottom: 0; }

.signup__grouptitle {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #888888;
}

/* 두 칸을 나란히 (성·이름 등) */
.signup__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}

.signup__row > .signup__field { flex: 1 1 200px; }

.signup__field { margin-bottom: 18px; }

.signup__label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #555555;
}

/* 필수 항목 표시 */
.signup__label[data-required]::after {
  content: ' *';
  color: #c0392b;
}

.signup__input,
.signup__select,
.signup__textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #d5d5d5;
  border-radius: 3px;
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  color: #1c1c1c;
}

.signup__textarea {
  min-height: 84px;
  resize: vertical;
}

.signup__input:focus,
.signup__select:focus,
.signup__textarea:focus {
  outline: none;
  border-color: #1c1c1c;
}

/* 한글 이름 입력 후 명단 확인 결과 */
.signup__match {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 3px;
  background: #f3f1e8;
  color: #6b5a2a;
  font-size: 12.5px;
  line-height: 1.6;
}

.signup__match.is-listed {
  background: #eaf5ea;
  color: #2f6b34;
}

/* 이미 로그인한 경우 안내 */
.signup__notice {
  margin: 0 0 24px;
  font-size: 14px;
  text-align: center;
  color: #555555;
}

.signup__notice a {
  color: #1c1c1c;
  font-weight: 700;
}

/* 입력칸 아래 설명 */
.signup__hint {
  margin: 6px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #999999;
}

/* ---------- 오류 문구 ---------- */

.signup__error {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: 3px;
  background: #fdeceb;
  color: #c0392b;
  font-size: 13px;
  line-height: 1.6;
}

/* ---------- 제출 ---------- */

.signup__submit {
  width: 100%;
  margin-top: 8px;
  padding: 14px;
  border: 0;
  border-radius: 3px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.signup__submit:hover { background: #333333; }

.signup__login {
  margin: 22px 0 0;
  font-size: 12.5px;
  color: #777777;
  text-align: center;
}

.signup__login a {
  color: #1c1c1c;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid #1c1c1c;
}

/* ---------- 신청 완료 화면 ---------- */

.signup__done {
  padding: 70px 24px 90px;
  text-align: center;
}

.signup__done h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.signup__done p {
  margin: 0 auto 28px;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.7;
  color: #555555;
}

.signup__done a {
  display: inline-block;
  padding: 12px 26px;
  border: 1px solid #1c1c1c;
  border-radius: 3px;
  color: #1c1c1c;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.signup__done a:hover {
  background: #1c1c1c;
  color: #ffffff;
}

@media (max-width: 700px) {
  .signup { padding: 38px 16px 56px; }
  .signup__title { font-size: 19px; }
  .signup__row { gap: 0; }
}

/* ============================================================
   My Page (08_My_Page.html)
   입력칸·버튼·묶음은 Sign Up 의 .signup__* 를 같이 씁니다
   ============================================================ */

.mypage {
  max-width: 720px;
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
  margin: 0 auto;
  padding: 19px 24px 72px;
}

/* ============================================================
   Archive (05_Archive.html) : 회원 전용 투어별 사진·영상
   ============================================================ */

.archive {
  max-width: 1200px;
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
  margin: 0 auto;
  padding: 19px 24px 72px;
}

.archive__state {
  margin: 40px 0;
  font-size: 14px;
  line-height: 1.7;
  color: #555555;
  text-align: center;
}

.archive__narrow { max-width: 240px; }

/* 투어 선택 + 올리기 버튼 */
.archive__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}

.archive__filter { flex: 0 1 320px; }

.archive__filterlabel {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #555555;
}

.archive__upbtn {
  padding: 12px 28px;
  border: 0;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.archive__upbtn:hover { background: #333333; }

.archive__empty,
.archive__more {
  margin: 40px 0;
  font-size: 13px;
  color: #999999;
  text-align: center;
}

/* 투어별 묶음 */
.archive__group { margin-bottom: 34px; }

.archive__grouptitle {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px;
}

.archive__tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #2a2a2a;
  cursor: pointer;
}

.archive__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s;
}

.archive__tile:hover img { transform: scale(1.04); }

/* 영상 표시 : 가운데 재생 동그라미 */
.archive__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
}

.archive__play::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 18px;
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent #ffffff;
}

@media (max-width: 700px) {
  .archive { padding: 13px 12px 56px; }
  .archive__filter { flex-basis: 100%; }
  .archive__upbtn { width: 100%; }
  .archive__grid { grid-template-columns: repeat(3, 1fr); gap: 3px; }
}

/* 크게 보기 */
.arview {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.94);
}

.arview[hidden] { display: none; }

.arview__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 64px 8px;
}

.arview__media {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.arview__error { color: #cccccc; font-size: 14px; }

.arview__info {
  margin: 0;
  padding: 10px 20px 18px;
  color: #d0d0d0;
  font-size: 13px;
  text-align: center;
}

.arview__close,
.arview__nav {
  position: absolute;
  z-index: 1;
  border: 0;
  background: none;
  color: #ffffff;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.8;
}

.arview__close:hover,
.arview__nav:hover { opacity: 1; }

.arview__close { top: 8px; right: 14px; font-size: 38px; line-height: 1; }

.arview__nav {
  top: 50%;
  margin-top: -40px;
  width: 56px;
  height: 80px;
  font-size: 56px;
  line-height: 1;
}

.arview__nav--prev { left: 4px; }
.arview__nav--next { right: 4px; }
.arview__nav[hidden] { display: none; }

@media (max-width: 700px) {
  .arview__stage { padding: 52px 0 4px; }
  .arview__nav { width: 40px; font-size: 42px; background: rgba(0, 0, 0, 0.25); }
}

body.is-noscroll { overflow: hidden; }

/* 크게 보기 : 내가 올린 사진이면 우측 하단 To Gallery / Leave from Gallery */
.arview__gallery {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.arview__gallery:hover { background: #ffffff; color: #111111; }
.arview__gallery[hidden] { display: none; }

@media (max-width: 700px) {
  .arview__info { padding-right: 150px; text-align: left; }
  .arview__gallery { right: 10px; bottom: 10px; font-size: 12px; padding: 7px 12px; }
}

/* To Gallery 크롭 창 */
.crop {
  position: fixed;
  inset: 0;
  z-index: 1700;
  display: flex;
  flex-direction: column;
  background: #0d0d0d;
  color: #ffffff;
  padding: 20px 16px 16px;
}

.crop[hidden] { display: none; }

.crop__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crop__wrap { position: relative; touch-action: none; }
.crop__wrap[hidden] { display: none; }

.crop__img {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
}

/* 틀 바깥은 어둡게 (큰 그림자로 덮음) */
.crop__frame {
  position: absolute;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
  cursor: move;
  touch-action: none;
}

.crop__frame::before,
.crop__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 3등분 안내선 */
.crop__frame::before {
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  left: 33.33%;
  right: 33.33%;
}

.crop__frame::after {
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  top: 33.33%;
  bottom: 33.33%;
}

.crop__stage { overflow: hidden; }

.crop__loading { position: absolute; color: #aaaaaa; font-size: 14px; }
.crop__loading[hidden] { display: none; }

.crop__ratios {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 12px;
}

.crop__ratio {
  min-width: 64px;
  padding: 8px 12px;
  border: 1px solid #555555;
  border-radius: 999px;
  background: none;
  color: #dddddd;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.crop__ratio.is-on { border-color: #ffffff; background: #ffffff; color: #111111; }

.crop__error { margin: 0 0 10px; color: #ff8a80; font-size: 13px; text-align: center; }
.crop__error[hidden] { display: none; }

.crop__actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.crop__btn {
  min-width: 120px;
  padding: 12px 20px;
  border: 1px solid #777777;
  border-radius: 4px;
  background: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.crop__btn--confirm { border-color: #ffffff; background: #ffffff; color: #111111; }
.crop__btn:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 500px) {
  .crop__ratio { min-width: 0; flex: 1 1 0; padding: 8px 4px; }
  .crop__btn { flex: 1 1 0; min-width: 0; }
}

/* 올리기 팝업 */
.upload__box { max-width: 520px; }

.upload__files { width: 100%; font-family: inherit; font-size: 13px; }

.upload__hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #888888;
}

.upload__queue {
  max-height: 240px;
  margin: 0 0 12px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.upload__item {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px;
  border-bottom: 1px solid #eeeeee;
  font-size: 12px;
  overflow: hidden;
}

.upload__name {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload__status {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  max-width: 55%;
  color: #777777;
  text-align: right;
}

.upload__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: #eef3ea;
  transition: width 0.2s;
}

.upload__item.is-done .upload__status { color: #2f6b34; }
.upload__item.is-error .upload__status { color: #c0392b; }

.mypage__state {
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.7;
  color: #555555;
  text-align: center;
}

.mypage__narrow { max-width: 240px; }

/* 사진 + 이름 */
.mypage__head {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 22px;
}

.mypage__photo { flex: 0 0 140px; text-align: center; }
.mypage__photo .ph { aspect-ratio: 1 / 1; background: #d9d6cc; }

.mypage__photobtn {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid #1c1c1c;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
}

.mypage__photobtn:hover { background: #1c1c1c; color: #ffffff; }

.mypage__namekr {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
}

.mypage__username {
  margin: 4px 0 10px;
  font-size: 13px;
  color: #777777;
}

.mypage__view {
  font-size: 13px;
  color: #1c1c1c;
}

/* 저장 완료 문구 */
.mypage__ok {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 3px;
  background: #eaf5ea;
  color: #2f6b34;
  font-size: 13px;
}

/* 참가한 투어 체크박스 */
.mypage__tours {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
}

.mypage__tours legend { padding: 0; }

.mypage__tour {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  cursor: pointer;
}

.mypage__tour input { margin-right: 6px; }

/* 참가한 투어 변경 요청 : 승인 대기 */
.mypage__toursreq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 4px 0 10px;
  padding: 10px 14px;
  border-radius: 3px;
  background: #fdf3e1;
  color: #8a5a12;
  font-size: 13px;
}

.mypage__toursreq[hidden] { display: none !important; }

.mypage__tourtag {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #fdf3e1;
  color: #8a5a12;
  font-size: 11px;
  white-space: nowrap;
}

/* 투어 신청 목록 */
.mypage__empty { margin: 0 0 18px; font-size: 13px; color: #999999; }

.mypage__apps {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.mypage__app {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #ececec;
}

.mypage__app.is-cancelled { opacity: 0.5; }

.mypage__apptitle { margin: 0; font-size: 15px; font-weight: 600; }
.mypage__appmeta { margin: 3px 0 0; font-size: 12px; color: #888888; }

.mypage__appside {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.mypage__badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: #ececec;
  font-size: 11.5px;
  font-weight: 700;
}

.mypage__app.is-confirmed .mypage__badge { background: #1c1c1c; color: #ffffff; }

.mypage__cancel {
  padding: 5px 10px;
  border: 1px solid #c0392b;
  border-radius: 3px;
  background: none;
  color: #c0392b;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.mypage__cancel:hover { background: #c0392b; color: #ffffff; }

@media (max-width: 700px) {
  .mypage { padding: 13px 16px 56px; }
  .mypage__head { gap: 16px; }
  .mypage__photo { flex-basis: 110px; }
  .mypage__namekr { font-size: 22px; }
}

/* ============================================================
   아직 내용이 없는 페이지의 본문 자리
   (03_Diary, 04_Gallery, 05_Archive, 08_My_Page, 06-01_*)
   ============================================================ */

.blankpage {
  /* 헤더·푸터를 뺀 나머지를 흰 바탕으로 채웁니다 */
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
  background: var(--cream);
}

/* ============================================================
   Gallery (04_Gallery.html)
   흐름 : 1. 검은 화면에서 마우스(터치) 위치로 버건디 물결이 퍼짐 (인트로)
          2. 화면이 다 덮이면 PC 는 좌우 검은 커튼이 들어오고 Gallery 글씨가 써짐
          3. 글씨가 끝나면 사진이 스크롤에 따라 좌우에서 밀려 들어옴
   <html class="gallery"> 인 페이지에만 적용됩니다.
   헤더·푸터는 화면에 고정이라 물결·커튼 위에 그대로 보입니다.
   ============================================================ */

html.gallery,
html.gallery body {
  width: 100%;
  height: 100%;
  background: #000000;
  overflow: hidden;              /* 인트로 동안은 스크롤 없음 */
}

html.gallery body { margin: 0; touch-action: none; }
html.gallery body.finished { background: #371414; touch-action: auto; }   /* R55 G20 B20 */

/* 1. 물결 캔버스 */
#intro { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
html.gallery body.finished #intro { display: none; }

/* 2. 좌우 커튼 (마우스를 쓰는 PC 에서만. 휴대폰·태블릿은 버건디 그대로) */
.curtain {
  display: none;
  position: fixed;
  top: 0;
  height: 100%;
  width: 25%;
  background: #000000;
  z-index: 2;
  pointer-events: none;
  transform: translateX(var(--entry-offset));
}

.curtain-left  { left: 0;  --entry-offset: -100%; }
.curtain-right { right: 0; --entry-offset: 100%; }

@media (hover: hover) and (pointer: fine) {
  .curtain { display: block; }
  html.gallery body.finished .curtain {
    animation: gallery-panel-in 2.8s cubic-bezier(0.45, 0, 0.22, 1) 0.45s both;
  }
}

@keyframes gallery-panel-in {
  from { transform: translateX(var(--entry-offset)); }
  to   { transform: translateX(0); }
}

/* Gallery 손글씨. 고정 헤더에 가리지 않게 헤더 높이만큼 내려서 둡니다 */
.gallery-sign {
  --writing-start: 0.45s;
  position: fixed;
  top: calc(var(--header-h) + clamp(12px, 3vh, 38px));
  left: 50%;
  width: clamp(154px, 22.4vw, 322px);
  max-width: 57.4vw;
  margin: 0;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  visibility: hidden;
}

.gallery-sign svg { display: block; width: 100%; height: auto; overflow: visible; }

.gallery-sign path {
  fill: none;
  stroke: #000000;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

html.gallery body.finished .gallery-sign { visibility: visible; }

html.gallery body.finished .gallery-sign path {
  animation: gallery-write calc(var(--stroke-time) / 1.3) cubic-bezier(.3, .1, .35, 1)
    calc(var(--writing-start) + var(--stroke-delay) / 1.3) both;
}

@media (hover: hover) and (pointer: fine) {
  /* 커튼이 0.45s + 2.8s 동안 들어온 뒤에 글씨 시작 */
  .gallery-sign { --writing-start: 3.4s; max-width: 30.8vw; }
}

@keyframes gallery-write {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  1%   { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

/* Skip : 우측 하단 (푸터 위). 누르면 커튼·손글씨는 끝난 모습으로 바로 */
.gallery-skip {
  position: fixed;
  right: 18px;
  bottom: calc(var(--footer-h) + 14px);
  z-index: 950;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  touch-action: manipulation;
}

.gallery-skip:hover { color: #ffffff; }

html.gallery body.gallery-skipped .curtain { animation: none; transform: translateX(0); }
html.gallery body.gallery-skipped .gallery-sign path { animation: none; stroke-dashoffset: 0; opacity: 1; }

/* 3. 사진 영역 (글씨가 끝나면 스크롤 가능) */
html.gallery.gallery-ready { height: auto; min-height: 100%; overflow-x: clip; overflow-y: auto; }
html.gallery body.gallery-ready { height: auto; min-height: 100vh; overflow: clip; }
html.gallery body.gallery-ready .gallery-sign { position: absolute; }

.gallery-content {
  --frame-width: 4px;
  width: 100%;
  margin-inline: auto;
  position: relative;
  padding: clamp(130px, 18vh, 180px) 0 10vh;
  overflow: clip;
}

.gallery-content[hidden] { display: none; }
.gallery-row { display: contents; }

.photo-slot { position: absolute; min-width: 0; }
.from-left  { left: 0;  --slide-from: -110vw; }
.from-right { right: 0; --slide-from: 110vw; }

.photo-card {
  margin: 0;
  transform: translateX(var(--slide-from));
  transition: transform 1.3s cubic-bezier(.22, .65, .25, 1);
}

.photo-slot.is-visible .photo-card { transform: translateX(0); }

.photo-card img {
  display: block;
  box-sizing: content-box;
  width: calc(100% - var(--frame-width) * 2);
  height: auto;
  border: var(--frame-width) solid #000000;
  background: #000000;           /* 사진이 불러와지기 전 칸 색 */
}

@media (hover: hover) and (pointer: fine) {
  .gallery-content { --frame-width: 6px; width: 50%; padding-inline: 0; }
}

/* 모바일(마우스 없는 기기)만 : 헤더~손글씨 여백 1/2, 손글씨~사진 여백 1/3
   사진 시작 위치 = 손글씨 위 여백(1/2) + 손글씨 높이(폭 × 160/460) + 원래 아래 여백의 1/3
   → 원래 값 G(위 여백), S(글씨 높이), P(원래 사진 위치)로 G/2 + S + (P - G - S)/3 = G/6 + 2S/3 + P/3 */
@media (hover: none), (pointer: coarse) {
  .gallery-sign { top: calc(var(--header-h) + clamp(6px, 1.5vh, 19px)); }
  .gallery-content {
    padding-top: calc(clamp(12px, 3vh, 38px) / 6
                      + min(clamp(154px, 22.4vw, 322px), 57.4vw) * 0.2319
                      + clamp(130px, 18vh, 180px) / 3);
  }
}

/* 좋아요 : 사진 좌측 하단 하트 + 누적 수. 더블클릭(두 번 탭)으로 좋아요 */
.photo-card {
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;      /* 두 번 탭해도 화면이 확대되지 않게 */
}

.photo-like {
  position: absolute;
  left: calc(var(--frame-width) + 8px);
  bottom: calc(var(--frame-width) + 7px);
  display: flex;
  align-items: center;
  gap: 5px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

.photo-like svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  transition: fill 0.2s, stroke 0.2s;
}

.photo-like.is-liked svg { fill: #ff3b5c; stroke: #ff3b5c; }
.photo-like.is-bump svg { animation: photo-like-bump 0.45s ease; }

@keyframes photo-like-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* 더블클릭하면 가운데에 크게 떴다 사라지는 하트 */
.photo-like__pop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26%;
  max-width: 110px;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: photo-like-pop 0.85s ease forwards;
}

.photo-like__pop svg {
  display: block;
  width: 100%;
  height: auto;
  fill: #ff3b5c;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

@keyframes photo-like-pop {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0; }
  25%  { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  45%  { transform: translate(-50%, -50%) scale(0.95); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
}

/* 내가 넣은 회원 사진을 한 번 누르면 우측 하단 */
.photo-leave {
  position: absolute;
  right: calc(var(--frame-width) + 8px);
  bottom: calc(var(--frame-width) + 6px);
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: #ffffff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.photo-leave:hover { background: #000000; }

@media (max-width: 600px) {
  .photo-like { font-size: 11px; gap: 4px; left: calc(var(--frame-width) + 5px); bottom: calc(var(--frame-width) + 5px); }
  .photo-like svg { width: 16px; height: 16px; }
  .photo-leave { font-size: 11px; padding: 5px 9px; right: calc(var(--frame-width) + 5px); bottom: calc(var(--frame-width) + 4px); }
}

/* ============================================================
   About Us (02_About_Us.html)
   ============================================================ */

.aboutpage {
  /* 헤더·푸터를 뺀 나머지를 채웁니다 */
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
  padding: 60px 24px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aboutpage__text {
  margin: 0;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: #1c1c1c;
  text-align: center;
}

@media (max-width: 700px) {
  .aboutpage { padding: 48px 20px; }
  .aboutpage__text { font-size: 24px; }
}

/* ============================================================
   Diary (03_Diary.html)
   투어 하나가 한 행(밴드)이고 투어마다 배경색이 다릅니다.
   ============================================================ */

.diary__row { padding: 26px 0; }

.diary__inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;   /* 사진과 글을 가운데로 모음 */
  gap: 28px;
}

.diary__photo { flex: 0 1 380px; }
.diary__photo .ph { aspect-ratio: 16 / 9; }

/* 영상도 사진과 똑같이 칸을 채웁니다 */
.diary__photo .ph > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.diary__text {
  flex: 0 1 300px;
  color: #1c1c1c;
}

.diary__year {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
}

.diary__place {
  margin: 0 0 14px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
}

.diary__desc {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.6;
}

/* 검정 알약 More 버튼 */
.diary__more {
  display: inline-block;
  padding: 8px 22px;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-size: 12.5px;
  text-decoration: none;
}

.diary__more:hover { background: #333333; }

/* ---------- 투어별 배경색 ---------- */

/* 색상 값은 맨 위 :root 의 --tour-* 에 있습니다 */
.diary__row--ishigaki   { background: var(--tour-ishigaki); }
.diary__row--oslob26    { background: var(--tour-oslob26); }
.diary__row--malapascua { background: var(--tour-malapascua); }
.diary__row--okinawa    { background: var(--tour-okinawa); }
.diary__row--moalboal   { background: var(--tour-moalboal); }
.diary__row--daecheongdo{ background: var(--tour-daecheongdo); }
.diary__row--bohol      { background: var(--tour-bohol); }

@media (max-width: 700px) {
  .diary__row { padding: 20px 0; }
  .diary__inner { padding: 0 16px; gap: 16px; }
  .diary__photo, .diary__text { flex: 1 1 100%; }
  .diary__place { font-size: 19px; }

  /* 모바일에서는 More 를 연도와 같은 줄 오른쪽 끝으로 올립니다.
     HTML 순서는 그대로 두고 격자 위치만 지정합니다. */
  .diary__text {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
  }

  .diary__year  { grid-column: 1;      grid-row: 1; }
  .diary__more  { grid-column: 2;      grid-row: 1; justify-self: end; }
  .diary__place { grid-column: 1 / -1; grid-row: 2; }
  .diary__desc  { grid-column: 1 / -1; grid-row: 3; margin-bottom: 0; }
}

/* ============================================================
   Member 상세 (06-01_*.html)
   ============================================================ */

/* 배경색 = 그 사람이 다녀온 투어 중 가장 과거 투어의 Diary 색.
   (캡틴 3명은 대청도 색)  <section class="member member--bohol"> 처럼 지정 */
.member {
  --member-bg: var(--tour-bohol);
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
  padding: 34px 0 40px;
  background: var(--member-bg);
  color: #1c1c1c;
}

.member[hidden] { display: none !important; }   /* PC 에서 display:flex 를 줘도 숨김이 이기게 */

/* 불러오는 중 / 없는 멤버 안내 (06-01_Member.html) */
.member__state {
  min-height: calc(100vh - var(--header-h) - var(--footer-h));
  margin: 0;
  padding: 80px 24px;
  font-size: 14px;
  color: #777777;
  text-align: center;
}

.member__state[hidden] { display: none; }

.member--ishigaki    { --member-bg: var(--tour-ishigaki); }
.member--oslob26     { --member-bg: var(--tour-oslob26); }
.member--malapascua  { --member-bg: var(--tour-malapascua); }
.member--okinawa     { --member-bg: var(--tour-okinawa); }
.member--moalboal    { --member-bg: var(--tour-moalboal); }
.member--daecheongdo { --member-bg: var(--tour-daecheongdo); }
.member--bohol       { --member-bg: var(--tour-bohol); }

.member__inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;           /* 글 칸 높이 = 사진 높이 (투어 목록을 사진 아래선에 맞추려고) */
  gap: 40px;
}

/* ---------- 왼쪽 사진 ---------- */

.member__photo { flex: 1 1 420px; position: relative; }

/* 본인 프로필 : 사진 안쪽 우측 하단 톱니바퀴 → My Page */
.member__edit {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  transition: background 0.2s, transform 0.3s;
}

.member__edit:hover { background: rgba(0, 0, 0, 0.8); transform: rotate(45deg); }
.member__edit[hidden] { display: none; }

.member__photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 오른쪽 글 ---------- */

/* 이름·소개는 위에서부터, 투어 목록은 맨 아래로 (사진 아래선과 맞춤) */
.member__info {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}

.member__name {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.member__name-kr {
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.3;
}

/* 자격증 / 기수 / 팀장 이력 */
.member__spec {
  margin: 26px 0 0;
  font-size: 15px;
  line-height: 1.6;
}

/* 한 줄 소개 */
.member__intro {
  margin: 42px 0 0;
  font-size: 23px;
  font-weight: 400;
  line-height: 1.45;
}

/* ---------- 참가한 투어 ---------- */

.member__tours {
  margin: auto 0 0;               /* 남는 높이를 위로 밀어 목록을 아래에 붙임 */
  padding: 52px 0 0;              /* 소개와의 최소 간격 */
  list-style: none;
}

/* flex 로 두면 줄 높이의 여분 없이 밑줄이 곧 줄의 아래끝이 되어
   마지막 줄 밑줄이 사진 아래선과 정확히 맞습니다 */
.member__tours li { display: flex; margin-bottom: 4px; }
.member__tours li:last-child { margin-bottom: 0; }

.member__tour {
  font-size: 18px;
  color: #1c1c1c;
  text-decoration: none;
  border-bottom: 1px solid #1c1c1c;
}

.member__tour:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

/* ---------- PC : 색 띠 + 위아래 베이지 여백 ----------
   색은 사진+글 높이만큼의 가로 띠로만 두고,
   남는 높이는 위아래 베이지 여백으로 똑같이 나눕니다. */
@media (min-width: 901px) {
  .member {
    display: flex;
    align-items: center;          /* 주황 띠를 세로 가운데로 */
    padding: 0;
    background: var(--cream);
  }

  /* 띠는 화면 가로 끝까지, 내용 폭은 원래대로 1060px 안에서 가운데.
     (1060px - 좌우 24px = 1012px 가 내용 폭) */
  .member__inner {
    width: 100%;
    max-width: none;
    padding: 34px max(24px, calc((100% - 1012px) / 2)) 40px;
    background: var(--member-bg);
  }
}

@media (max-width: 700px) {
  .member { padding: 24px 0 30px; }
  .member__inner { padding: 0 16px; gap: 22px; }
  .member__photo, .member__info { flex: 1 1 100%; }

  .member__name    { font-size: 27px; }
  .member__name-kr { font-size: 24px; }
  .member__spec    { margin-top: 18px; font-size: 14px; }
  .member__intro   { margin-top: 28px; font-size: 20px; }
  .member__tours   { margin-top: 0; padding-top: 32px; }
  .member__tour    { font-size: 16px; }
}

/* ============================================================
   Members (06_Members.html)
   ============================================================ */

/* ---------- 위 : 노란 구역 (캡틴 3명) ---------- */

.captains {
  padding: 30px 24px 18px;
  background: #fbe74e;
}

/* 캡틴도 아래 멤버와 같은 칸 크기(--person-w)로 */
.captains__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px 16px;
}

.captains .person { width: var(--person-w); }
.captains .person__photo { aspect-ratio: 1 / 1; }
.captains .person__name { color: #1c1c1c; }

/* ---------- 아래 : 검정 구역 (멤버) ---------- */

.roster {
  padding: 8px 24px 40px;
  background: #000000;
}

/* 멤버 한 칸 폭. 캡틴 칸과 똑같이 맞추려고 고정값으로 둡니다.
   (칸이 늘어나는 1fr 방식이면 화면마다 폭이 달라져 캡틴과 맞출 수 없음)
   단, 화면이 좁아 250px 3칸이 안 들어가면 3칸에 맞춰 줄어듭니다 (최소 3열).
   100vw 에서 뺀 값 = 좌우 여백 48px + 칸 사이 간격 16px x 2 + 스크롤바 여유 20px */
:root { --person-w: min(250px, calc((100vw - 100px) / 3)); }

.roster__list {
  /* 한 행에 최대 9명.  9칸 + 간격 8개 = 250*9 + 16*8 = 2378px.
     이보다 넓은 화면에서도 9칸을 넘지 않게 폭을 묶어둡니다. */
  max-width: 2378px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--person-w));
  justify-content: center;        /* 남는 폭은 좌우로 똑같이 */
  gap: 26px 16px;
}

.roster .person__photo { aspect-ratio: 1 / 1; }
.roster .person__name { color: #ffffff; }

/* 검정 배경에서도 칸이 보이게 한 단계 밝은 회색 */
.roster .ph { background: #454545; }

/* ---------- 사람 한 명 ---------- */

.person { text-align: center; }

.person__link {
  display: block;
  text-decoration: none;
}

.person__name {
  display: block;
  margin-top: 11px;
  font-size: 14px;
  line-height: 1.4;
}

.person__link:hover .person__name { text-decoration: underline; }
.person__link:hover .ph { opacity: 0.8; }

/* 모바일 : 캡틴·멤버 모두 사진을 줄여 한 행에 3명씩 */
@media (max-width: 700px) {
  .captains { padding: 18px 12px 16px; }
  .roster   { padding: 16px 12px 28px; }

  .captains__list,
  .roster__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 10px;
  }

  .captains .person { width: auto; }

  .person__name {
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.3;
  }
}

/* ============================================================
   Main (01_Main.html)
   ============================================================ */

:root {
  --cream:  #faf9f2;   /* 메인 바탕 */
  --band:   #6e6e6e;   /* Recent Activities 회색 밴드 */
}

/* 사진이 아직 없어서 자리표시로 어두운 칸을 둡니다.
   <img> 를 넣으면 그 위에 덮여 보이지 않게 됩니다. */
.ph {
  display: block;
  width: 100%;
  background: #2b2b2b;
  overflow: hidden;
}

.ph > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main { background: var(--cream); }

.main__inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 구역 제목 옆 알약 라벨 (About us, Upcoming Tour) */
.pill {
  display: inline-block;
  padding: 7px 18px;
  border: 1px solid #1c1c1c;
  border-radius: 999px;
  color: #1c1c1c;
  font-size: 14px;
  text-decoration: none;
}

a.pill:hover { background: #1c1c1c; color: var(--cream); }

/* ---------- 1. About us ---------- */

.about {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;   /* 사진과 글을 가운데로 모음 */
  gap: 36px;
  /* 좌우 여백은 .main__inner 가 주므로 위아래만 지정합니다.
     padding 단축 표기를 쓰면 좌우가 0 으로 덮어써집니다. */
  padding-top: 36px;
  padding-bottom: 40px;
}

/* 사진 폭 상한. 1280px 화면에서 530px -> 424px (80%) */
.about__photo {
  flex: 0 1 424px;
  max-width: 424px;
}

.about__photo .ph { aspect-ratio: 4 / 3; }

/* 남는 공간을 채우지 않게 해서 글이 좁게 여러 줄로 흐르도록 */
.about__text {
  flex: 0 1 380px;
  text-align: center;
}

.about__body {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: #2b2b2b;
}

/* ---------- 2. Recent Activities (회색 밴드) ---------- */

.recent {
  padding: 24px 0 30px;
  background: var(--band);
  color: #ffffff;
}

.recent__title {
  margin: 0 0 15px;
  font-size: 23px;
  font-weight: 400;
}

.recent__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.recent__card .ph { aspect-ratio: 16 / 11; }

/* 사진도 투어 페이지 링크 */
.recent__photo { display: block; }
.recent__photo:hover .ph { opacity: 0.8; }

.recent__name {
  display: inline-block;
  margin: 10px 0 7px;
  color: #ffffff;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid #ffffff;
}

.recent__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #e8e8e8;
}

/* ---------- 3. Upcoming Tour ---------- */

/* 좌우 여백은 .main__inner 담당. 위아래만 지정 */
.upcoming { padding-top: 30px; padding-bottom: 14px; }

.upcoming__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;   /* 글과 사진을 가운데로 모음 */
  gap: 48px;
  margin-top: 22px;
}

/* 남는 공간을 채우지 않게 해서 사진이 오른쪽 끝으로 밀리지 않도록 */
.upcoming__info { flex: 0 1 360px; }

.upcoming__place {
  margin: 0 0 10px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.upcoming__when {
  margin: 0 0 14px;
  font-size: 20px;
  color: #1c1c1c;
}

.upcoming__inst {
  margin: 0 0 11px;
  font-size: 13.5px;
  color: #2b2b2b;
}

.upcoming__inst b { font-weight: 700; }

.upcoming__members {
  margin: 0;
  max-width: 340px;
  font-size: 13.5px;
  line-height: 1.8;
  color: #2b2b2b;
}

/* 강사(Park, Han)·참가 예정자 이니셜 = 각 프로필 링크
   밑줄 없이, 마우스를 올리면 회색으로 */
.upcoming__inst a,
.upcoming__members a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;           /* 이니셜 중간에서 줄이 끊기지 않게 */
}

.upcoming__inst a:hover,
.upcoming__members a:hover { color: #8b8b8b; }

.upcoming__photo { flex: 0 1 280px; }
.upcoming__photo .ph { aspect-ratio: 1 / 1; }

/* 예정 투어 상세 페이지 링크 (장소 글자·사진) : 모양은 그대로, 올리면 흐리게 */
.upcoming__place a,
.join__place a { color: inherit; text-decoration: none; }
.upcoming__place a:hover,
.join__place a:hover { color: #8b8b8b; }
.upcoming__photo a.ph > img { transition: opacity .2s; }
.upcoming__photo a.ph:hover > img { opacity: .85; }

/* ---------- 4. Join a Tour ---------- */

.join {
  /* 좌우 여백은 .main__inner 담당. 위아래만 지정 */
  padding-top: 20px;
  padding-bottom: 46px;
  text-align: center;
}

.join__title {
  margin: 0 0 6px;
  font-size: 23px;
  font-weight: 400;
}

.join__sub {
  margin: 0 0 20px;
  font-size: 15px;
  color: #2b2b2b;
}

.join__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  text-align: left;
}

.join__card {
  padding: 20px 24px 22px;
  border: 1px solid #dedad0;
  border-radius: 6px;
  background: var(--cream);
}

.join__place {
  margin: 0 0 9px;
  font-size: 15px;
  color: #1c1c1c;
}

.join__price {
  margin: 0 0 13px;
  font-size: 18px;
  font-weight: 500;
}

/* 체크 목록 */
.join__points {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.join__points li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 5px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #3a3a3a;
}

.join__points li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #6e6e6e;
}

.join__btn {
  display: block;
  padding: 13px;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}

.join__btn:hover { background: #333333; }

.upcoming[hidden],
.upcoming__photo[hidden] { display: none !important; }

/* DB 로 만든 카드는 <button> : 링크 버튼과 같은 모양으로 */
button.join__btn {
  width: 100%;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* 이미 참가/신청한 투어 (누르면 안내 팝업) */
.join__btn.is-done,
.join__btn.is-done:hover {
  background: #d9d9d9;
  color: #555555;
}

/* 신청 팝업 */
.join__modaltour {
  margin: -12px 0 20px;
  font-size: 14px;
  text-align: center;
  color: #555555;
}

/* 나가기 확인 : 왼쪽 Quit(빨강) / 오른쪽 Back */
.join__choice {
  display: flex;
  gap: 10px;
}

.join__choice .login__submit { flex: 1 1 0; }

.join__quit { background: #c0392b; }
.join__quit:hover { background: #a93226; }

.join__message {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* ---------- 좁은 화면 ---------- */

@media (max-width: 900px) {
  .recent__list { grid-template-columns: repeat(2, 1fr); }
  .join__list   { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .main__inner { padding: 0 16px; }

  .about { gap: 20px; padding-top: 26px; padding-bottom: 30px; }
  .about__photo { max-width: none; }
  .recent { padding: 20px 0 24px; }
  .recent__list { grid-template-columns: 1fr; gap: 18px; }
  .recent__title, .join__title { font-size: 20px; }

  .upcoming { padding-top: 22px; padding-bottom: 12px; }
  .upcoming__body { gap: 18px; margin-top: 18px; }
  .upcoming__place { font-size: 28px; }
  .upcoming__when { font-size: 18px; }
  .upcoming__photo { flex: 1 1 100%; }

  .join { padding-top: 18px; padding-bottom: 40px; }
  .join__card { padding: 18px 18px 20px; }
}

/* ============================================================
   Tour 상세 (03-xx_*.html)
   위에서부터  1. 영상 + 제목 (투어 색 띠)
              2. 소감문 + 사진 (검정)
              3. We had tour with (참가자 프로필)
              4. Explore the episodes (영상 3칸)
   ============================================================ */

.tourpage__inner {
  max-width: 1512px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- 1. 영상 + 제목 ---------- */

/* 배경색 = Diary 의 투어 색.  <section class="tourhero tourhero--oslob26"> 처럼 지정 */
.tourhero { padding: 33px 0; background: var(--tour-bg, var(--cream)); }   /* 모바일 값은 아래 700px 구간 */

.tourhero--ishigaki    { --tour-bg: var(--tour-ishigaki); }
.tourhero--oslob26     { --tour-bg: var(--tour-oslob26); }
.tourhero--malapascua  { --tour-bg: var(--tour-malapascua); }
.tourhero--okinawa     { --tour-bg: var(--tour-okinawa); }
.tourhero--moalboal    { --tour-bg: var(--tour-moalboal); }
.tourhero--daecheongdo { --tour-bg: var(--tour-daecheongdo); }
.tourhero--bohol       { --tour-bg: var(--tour-bohol); }

.tourhero .tourpage__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px 76px;
}

.tourhero__media { flex: 0 1 555px; }
.tourhero__media .ph { aspect-ratio: 16 / 9; }

.tourhero__media .ph > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tourhero__text { flex: 0 1 600px; color: #1c1c1c; }

.tourhero__title {
  margin: 0;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.tourhero__title span { display: block; }   /* 연도 / 장소 두 줄 */

.tourhero__desc {
  margin: 38px 0 0;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.55;
}

/* ---------- 2. 소감문 + 사진 ---------- */

.tourstory {
  padding: 34px 0;
  background: #111111;
  color: #ffffff;
}

/* 제목+본문+작성자 묶음의 세로 중앙 = 오른쪽 사진의 세로 중앙 */
.tourstory .tourpage__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px 150px;
}

/* 작성자는 묶음 맨 아래 오른쪽 */
.tourstory__text {
  display: flex;
  flex-direction: column;
}

.tourstory__title {
  margin: 0;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.3;
}

.tourstory__body {
  margin: 35px 0 0;               /* 제목과의 간격 */
  font-size: 18px;
  line-height: 1.6;
  color: #e8e8e8;
  word-break: keep-all;          /* 한글이 단어 중간에서 끊기지 않게 */
}

.tourstory__author {
  align-self: flex-end;
  padding-top: 28px;
  color: #ffffff;
  font-size: 18px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tourstory__author:hover { color: var(--fg-dim); }

.tourstory__photo .ph {
  aspect-ratio: 4 / 3;
  background: #454545;           /* 검정 바탕에서도 빈 칸이 보이게 */
}

/* ---------- 3. We had tour with ---------- */

.tourmates {
  padding: 34px 0 21px;          /* 아래 21 + episodes 위 28 = 참가자 사진 ~ episodes 간격 */
  background: var(--cream);
  text-align: center;
}

.tourmates__title {
  margin: 0 0 22px;
  font-size: 34px;
  font-weight: 400;
}

/* 한 행에 최소 4명, 최대 8명.
   칸 폭은 220px, 목록 폭이 좁아 4칸이 안 들어가면 4칸에 맞춰 줄어듭니다.
   목록 최대 폭 = 8칸 + 간격 7개 라서 9번째 칸은 다음 줄로 넘어갑니다. */
.tourmates .tourpage__inner { max-width: none; }   /* 8칸이 들어가게 페이지 폭 제한을 풀어둠 */

.tourmates__list {
  --mate-gap: 16px;
  max-width: calc(220px * 8 + var(--mate-gap) * 7);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;       /* 마지막 줄도 가운데 */
  gap: var(--mate-gap);
}

/* -0.1px : 소수점 반올림으로 4번째 칸이 다음 줄로 밀리는 것 방지 */
.tourmate { width: min(220px, calc((100% - var(--mate-gap) * 3) / 4 - 0.1px)); }

.tourmate__link { display: block; }
.tourmate__link .ph { aspect-ratio: 1 / 1; }
.tourmate__link:hover .ph { opacity: 0.8; }

/* ---------- 4. Explore the episodes ---------- */

.tourepisodes {
  padding: 28px 0 60px;
  background: var(--cream);
}

.tourepisodes__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.tourepisodes__title {
  margin: 0;
  font-size: 34px;
  font-weight: 400;
}

.tourepisodes__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 55px;
}

.tourepisodes__list .ph { aspect-ratio: 16 / 9; }

/* 재생 버튼을 눌러야 재생 (브라우저 기본 컨트롤 : 재생, 타임라인, 소리, 전체화면) */
.tourepisodes__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;           /* 영상이 16:9 가 아니어도 잘리지 않게 */
  background: #000000;
}

@media (max-width: 900px) {
  .tourstory .tourpage__inner { gap: 32px 48px; }
  .tourepisodes__list { gap: 20px; }
}

@media (max-width: 700px) {
  .tourpage__inner { padding: 0 16px; }

  .tourhero { padding: 28px 0 32px; }
  .tourhero .tourpage__inner { gap: 20px; }
  .tourhero__media { flex: 1 1 100%; }
  .tourhero__title { font-size: 32px; }
  .tourhero__desc { margin-top: 16px; font-size: 17px; }

  .tourstory { padding: 28px 0; }
  .tourstory .tourpage__inner { grid-template-columns: 1fr; gap: 20px; }
  .tourstory__text { padding: 0; }
  .tourstory__title { font-size: 26px; }
  .tourstory__body { margin-top: 10px; font-size: 15px; }
  .tourstory__author { padding-top: 18px; font-size: 15px; }

  .tourmates { padding: 28px 0 16px; }
  .tourmates__title { margin-bottom: 16px; font-size: 24px; }
  .tourmates__list { --mate-gap: 8px; }

  .tourepisodes { padding: 16px 0 40px; }
  .tourepisodes__title { font-size: 24px; }
  .tourepisodes__list { grid-template-columns: 1fr; gap: 16px; }
}


/* ============================================================
   Upcoming Tour 상세 (01-xx_*.html)
   지난 투어(03-xx)와 다른 모양 :
     1. 반반 화면 : 왼쪽 사진 / 오른쪽 어두운 판 (장소·날짜·강사·D-day·Join)
     2. Who's going : 동그란 프로필 + 이니셜, 인원 수
   투어별 포인트 색 = <main class="upc upc--coron"> 의 --upc-accent
   ============================================================ */

.upc { --upc-accent: #ffffff; background: var(--cream); }
.upc--coron    { --upc-accent: var(--tour-coron); }
.upc--yonaguni { --upc-accent: var(--tour-yonaguni); }

/* ---------- 1. 사진 + 정보 ---------- */

/* 사진은 잘리지 않게 정사각형 그대로. 폭은 화면 절반, 단 720px 까지 (원본보다 너무 커져 흐려지지 않게)
   오른쪽 판 높이 = 사진 높이 */
.upc-hero {
  display: grid;
  grid-template-columns: min(50%, 720px) 1fr;
  background: #0f1417;
  color: #ffffff;
}

.upc-hero__photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #2b2b2b; }

.upc-hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upc-hero__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px clamp(24px, 6vw, 96px);
}

.upc-hero__tag {
  align-self: flex-start;
  margin: 0 0 26px;
  padding: 6px 14px;
  border: 1px solid var(--upc-accent);
  border-radius: 999px;
  color: var(--upc-accent);
  font-size: 13px;
  letter-spacing: 0.12em;
}

.upc-hero__place {
  margin: 0;
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.upc-hero__country {
  margin: 14px 0 0;
  font-size: 20px;
  font-weight: 300;
  color: #cfd6da;
}

/* 날짜 / 강사 / D-day : 가는 선으로 나눈 세 칸 */
.upc-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 40px 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.upc-hero__fact {
  flex: 1 1 120px;
  padding: 16px 20px 0 0;
}

.upc-hero__fact + .upc-hero__fact {
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.upc-hero__fact dt {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #8f9aa0;
}

.upc-hero__fact dd { margin: 0; font-size: 20px; }

.upc-hero__fact a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.upc-hero__fact a:hover { color: var(--upc-accent); }

.upc-hero__dday { color: var(--upc-accent); font-weight: 600; }

.upc-hero__join {
  align-self: flex-start;
  margin-top: 40px;
  padding: 13px 34px;
  border-radius: 999px;
  background: var(--upc-accent);
  color: #0f1417;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}

.upc-hero__join:hover { opacity: 0.85; }

/* ---------- 2. Who's going ---------- */

.upc-going {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 80px;
  text-align: center;
}

.upc-going__title {
  margin: 0 0 36px;
  font-size: 34px;
  font-weight: 400;
}

.upc-going__count {
  display: inline-block;
  min-width: 1.6em;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #1c1c1c;
  color: var(--cream);
  font-size: 18px;
  vertical-align: middle;
}

.upc-going__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 22px;
}

.upc-diver { width: 112px; }

.upc-diver__link {
  display: block;
  color: #1c1c1c;
  text-decoration: none;
}

.upc-diver__photo {
  display: block;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  background: #d9d5ca;
  transition: transform 0.2s;
}

.upc-diver__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.upc-diver__link:hover .upc-diver__photo { transform: scale(1.05); }

.upc-diver__name { display: block; margin-top: 10px; font-size: 14px; }

/* 강사 표시 */
.upc-diver__role {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
}

.upc-going__empty {
  margin: 0;
  font-size: 17px;
  color: #6b6b6b;
}

@media (max-width: 800px) {
  .upc-hero { grid-template-columns: 1fr; min-height: 0; }
  .upc-hero__photo { aspect-ratio: 1 / 1; }
  .upc-hero__panel { padding: 32px 16px 40px; }
  .upc-hero__tag { margin-bottom: 18px; }
  .upc-hero__country { font-size: 17px; }
  .upc-hero__facts { margin-top: 28px; }
  .upc-hero__fact dd { font-size: 17px; }
  .upc-hero__join { margin-top: 28px; }

  .upc-going { padding: 40px 16px 56px; }
  .upc-going__title { margin-bottom: 24px; font-size: 24px; }
  .upc-going__list { gap: 20px 12px; }
  .upc-diver, .upc-diver__photo { width: 84px; }
  .upc-diver__photo { height: 84px; }
  .upc-diver__name { font-size: 13px; }
}

/* ---------- 3. Pending : 신청 중인 사람 이니셜 (사진 없음) ---------- */

.upc-pending {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 80px;
  text-align: center;
}

.upc-pending__title {
  margin: 0 0 20px;
  padding-top: 40px;
  border-top: 1px solid #dedad0;
  font-size: 24px;
  font-weight: 400;
  color: #4a4a4a;
}

.upc-pending__count {
  display: inline-block;
  min-width: 1.6em;
  margin-left: 8px;
  padding: 1px 9px;
  border: 1px solid #8b8b8b;
  border-radius: 999px;
  color: #6b6b6b;
  font-size: 15px;
  vertical-align: middle;
}

.upc-pending__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.upc-pending__name {
  display: inline-block;
  padding: 7px 16px;
  border: 1px dashed #9a968c;
  border-radius: 999px;
  color: #4a4a4a;
  font-size: 14px;
  text-decoration: none;
}

.upc-pending__name:hover { border-style: solid; color: #1c1c1c; }

.upc-pending__empty { margin: 0; font-size: 15px; color: #8b8b8b; }

/* Who's going 아래 여백을 Pending 과 나눠 씀 */
.upc-going:has(+ .upc-pending:not([hidden])) { padding-bottom: 48px; }

@media (max-width: 800px) {
  .upc-pending { padding: 0 16px 56px; }
  .upc-pending__title { padding-top: 28px; font-size: 20px; }
  .upc-pending__list { gap: 8px; }
  .upc-pending__name { padding: 6px 13px; font-size: 13px; }
  .upc-going:has(+ .upc-pending:not([hidden])) { padding-bottom: 36px; }
}