@charset "UTF-8";

/*================================================
 * 기본 설정 / 基本設定
 ================================================*/
html, body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  background: #fff;
  color: #1c2120;
  line-height: 1.6;
}
a {
  text-decoration: none;
  color: #1c2120;
}
a:hover {
  color: #7a0044;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/*================================================
 * 상단 고정 헤더 / 固定ヘッダー
 ================================================*/
.header {
  position: fixed;
  top: 0;
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #d9d9d9;
  z-index: 1000;
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: row; /* ✅ 로고와 메뉴 나란히 */
  justify-content: space-between; /* 좌우 배치 */
  align-items: center;
  padding: 8px 15px;
}
.logo img {
  height: 45px;
  vertical-align: middle;
  background: #ffffff;
}

/*================================================
 * 메뉴 토글 버튼 / メニューボタン（모바일 전용）
 ================================================*/
.menu-toggle {
  display: none;
  cursor: pointer;
  background: #a7005d;
  color: #fff;
  padding: 8px 16px;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  transition: background 0.3s ease;
  position: relative;
}
.menu-toggle::after {
  content: "▼";
  font-size: 12px;
  margin-left: 8px;
}
.menu-toggle.active::after {
  content: "▲";
}
.menu-toggle:hover {
  background: #7a0044;
}

/*================================================
 * 네비게이션 / ナビゲーション（PC 고정형）
 ================================================*/
.navbar {
  width: auto;
  display: block;
}
.navbar ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  background: #ffffff;
}
.navbar li {
  list-style: none;
  position: relative;
}
.navbar li a {
  display: block;
  padding: 12px 25px;
  color: #1c2120;
  font-weight: bold;
  text-align: center;
  transition: background 0.2s ease;
}
.navbar li a:hover {
  background: #fde4f1;
}

/*================================================
 * 서브메뉴 / サブメニュー
 ================================================*/
.navbar li.has-submenu > a::after {
  content: "▼";
  font-size: 10px;
  margin-left: 5px;
}
.submenu {
  display: none;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #d9d9d9;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  transition: opacity 0.3s ease;
  z-index: 1000;
  min-width: 180px;
}
.navbar li:hover .submenu {
  display: block;
  opacity: 1;
}
.submenu li a {
  padding: 10px 15px;
  background: #fafafa;
  color: #1c2120;
  text-align: left;
}
.submenu li a:hover {
  background: #fde4f1;
}

/*================================================
 * 검색창 / 検索エリア
 ================================================*/
.search-area {
  margin-top: 100px; /* ✅ 헤더 높이 보정 */
  text-align: center;
  padding: 20px;
  background: #f9f9f9;
  border-bottom: 1px solid #d9d9d9;
}
.search-area input {
  width: 60%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px 0 0 5px;
  outline: none;
}
.search-area button {
  padding: 10px 20px;
  background: #a7005d;
  border: none;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}
.search-area button:hover {
  background: #7a0044;
}

/*================================================
 * 메인 콘텐츠 / メインコンテンツ
 ================================================*/
.main-content {
  max-width: 1100px;
  margin: 30px auto;
  display: flex;
  gap: 20px;
  padding: 0 10px;
}

/* 본문을 왼쪽에 / コンテンツを左側に */
.content {
  width: 70%;
}
.content h2 {
  font-size: 18px;
  color: #1c2120;
  border-left: 5px solid #a7005d;
  padding-left: 10px;
  margin-bottom: 10px;
}
.content p {
  margin-bottom: 20px;
}
.banner img {
  width: 100%;
  border-radius: 5px;
  margin-bottom: 30px;
}

/* 사이드바를 오른쪽으로 / サイドバーを右側に */
.sidebar {
  width: 30%;
  padding: 15px;
  box-sizing: border-box;
  order: 2; /* 오른쪽으로 이동 */
}
.sidebar h3 {
  color: #1c2120;
  font-size: 16px;
  margin-bottom: 10px;
  border-bottom: 1px solid #d9d9d9;
}
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar li {
  margin-bottom: 8px;
}
.sidebar li a {
  color: #1c2120;
}
.sidebar li a:hover {
  color: #7a0044;
}
.side-banner img {
  width: 100%;
  margin-top: 15px;
  border-radius: 5px;
}

/*================================================
 * 푸터 / フッター
 ================================================*/
.footer {
  background: #fff;
  border-top: 1px solid #d9d9d9;
  text-align: center;
  padding: 20px 10px;
}
.footer-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-menu li {
  display: inline-block;
  margin: 0 10px;
}
.footer-menu a {
  color: #1c2120;
  font-size: 14px;
}
.footer-menu a:hover {
  color: #7a0044;
}
.footer img {
  width: 250px;
  height: auto;
}

/*================================================
 * 돌아가기 버튼 / 戻るボタン
 ================================================*/
.back-btn {
  text-align: center !important;
  width: 100%;
  margin: 20px auto 20px; /* 수정됨 */
}
.back-btn button {
  background: #a7005d;
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 5px;
  cursor: pointer;
}
.back-btn button:hover {
  background: #7a0044;
}

/*================================================
 * 위로가기 버튼 / トップへ戻るボタン
 ================================================*/
.totop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 999;
}
.totop img {
  width: 45px;
  height: 45px;
  background: #a7005d;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transition: background 0.3s ease;
}
.totop img:hover {
  background: #7a0044;
}

/*================================================
 * 반응형 디자인 / レスポンシブ対応
 ================================================*/
@media screen and (max-width: 767px) {
  .header-inner {
    flex-direction: column;
    align-items: center;
  }

  .menu-toggle {
    display: block;
    width: 90%;
    margin-top: 5px;
  }

  .navbar {
    width: 100%;
    display: none;
  }
  .navbar.show {
    display: block;
  }

  .navbar ul {
    flex-direction: column;
    border-top: 1px solid #d9d9d9;
  }
  .navbar li a {
    text-align: center;
    border-bottom: 1px solid #eee;
  }

  .main-content {
   flex-direction: column; /* ✅ 모바일에서 본문 → 사이드바 순서로 표시 */
  }

  .sidebar,
  .content {
    width: 100%;
  }

    /* ================================
   📱 헤더 높이 증가에 따른 검색창 위치 보정
   스마트폰에서 검색창이 반만 보이는 현상 해결
  ================================ */
  .search-area {
    margin-top: 140px; /* ← 헤더 높이(로고 + 로그인 문구 + 메뉴 버튼)에 맞춰 보정 */
  }
}

/*================================================
 * 랜덤 점포소개 / ランダム店舗紹介
 ================================================*/
.random-shop-box {
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 10px;
  margin-top: 20px;
  background: #fafafa;
  text-align: center;
}
.random-shop-box img {
  width: 100%;
  border-radius: 5px;
  margin-bottom: 10px;
}
.random-shop-box h4 {
  font-size: 15px;
  color: #1c2120;
  margin-bottom: 5px;
}
.random-shop-box p {
  font-size: 13px;
  color: #555;
  margin: 0;
}

/* 회원가입 폼 / 会員登録フォーム */
.register-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.register-form label {
  font-weight: bold;
  color: #1c2120;
}
.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"],
.register-form input[type="tel"],
.register-form input[type="url"],
.register-form input[type="file"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}
.register-form .btn {
  background-color: #a7005d;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 15px;
  cursor: pointer;
  transition: 0.3s;
}
.register-form .btn:hover {
  background-color: #7a0044;
}

/* ===================== 버튼 영역 / ボタンエリア ===================== */
.form-actions {
  text-align: center;
  margin-top: 30px;
}
.form-actions .btn {
  background: #a7005d;
  color: #fff;
  padding: 10px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 15px;
}
.form-actions .btn:hover {
  background: #7a0044;
}

/* ===================== 공통 제목 h2 스타일 통일 / 見出し統一 ===================== */
h2 {
  margin-bottom: 0.5em;
  padding-left: 10px;
  font-size: 18px;
  color: #1c2120;
  border-left: 5px solid #a7005d;
}

/* ===================== 로그인 박스 / ログインボックス ===================== */
.login-box {
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 15px;
  background: #fafafa;
  margin-bottom: 20px;
}
.login-box h2 {
  font-size: 18px;
  color: #1c2120;
  margin-bottom: 10px;
  border-left: 5px solid #a7005d;
  padding-left: 10px;
}
.login-box .form-group {
  margin-bottom: 10px;
}
.login-box input[type="email"],
.login-box input[type="password"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}
.btn-login {
  width: 100%;
  background: #a7005d;
  color: #fff;
  border: none;
  padding: 8px;
  border-radius: 5px;
  cursor: pointer;
}
.btn-login:hover {
  background: #7a0044;
}
.login-links {
  text-align: center;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.8;
}
.login-links a {
  color: #1c2120;
  text-decoration: none;
  margin: 0 5px;
  font-weight: 500;
}
.login-links a:hover {
  color: #7a0044;
  text-decoration: none;
}
.login-box .remember {
  font-size: 13px;
  color: #333;
  display: block;
  margin: 10px 0;
  text-align: left;
}
.login-box .remember input {
  vertical-align: middle;
  margin-right: 5px;
}

/* ==============================
   店舗登録フォーム表示関連（점포등록 표시 안정화）
   ============================== */
#shop-section, #site-section {
  display: none;
  margin-top: 15px;
  padding: 10px 15px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #fafafa;
}
#shop-section .form-group,
#site-section .form-group {
  margin-bottom: 14px;
}
.preview-box img {
  max-width: 200px;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: block;
  margin-top: 6px;
}

/* ===================== 회원가입(register.php) 전용 버튼 회색 ===================== */
body.register-page .form-actions .btn {
  background: #6c6c6c;   /* 은은한 회색 */
}
body.register-page .form-actions .btn:hover {
  background: #4a4a4a;   /* hover 시 조금 어둡게 */
}