@charset "UTF-8";
/* === 전체 세로 여백 축소 === */
:root {
  --margin-layout: clamp(8px, 1.8vw, 18px) !important;
  --padding-component: 12px !important;
}

/* === h2~h4 제목 간격을 조금 여유있게 === */
h2, h3, h4 {
  margin-top: 0.8em !important;    /* 기존 0.5em → 0.8em */
  margin-bottom: 0.55em !important;/* 기존 0.35em → 0.55em */
  line-height: 1.45 !important;    /* 줄간격도 살짝 여유 */
}

p, ul, ol {
  margin-top: 0.4em !important;      /* 기본 1em → 0.4em */
  margin-bottom: 0.4em !important;
  line-height: 1.6 !important;       /* 읽기 좋은 정도 유지 */
}

/* h2 바로 아래 h3가 연속될 때는 간격 유지 */
h2 + h3 {
  margin-top: 0.4em !important;    /* 너무 붙지 않게 약간만 띄움 */
}
/* === 리스트・문단 간격 조정 === */
p, ul, ol {
  margin-top: 0.55em !important;   /* 기존보다 살짝 넓게 */
  margin-bottom: 0.55em !important;
  line-height: 1.7 !important;     /* 읽기 좋은 줄 간격 */
}

/* 리스트 항목(・ 등)의 줄 간격 */
li {
  margin-top: 0.25em !important;
  margin-bottom: 0.25em !important;
  line-height: 1.65 !important;
}
/* === 리스트・문단 간격 조정 === */
p, ul, ol {
  margin-top: 0.55em !important;   /* 기존보다 살짝 넓게 */
  margin-bottom: 0.55em !important;
  line-height: 1.7 !important;     /* 읽기 좋은 줄 간격 */
}

/* 리스트 항목(・ 등)의 줄 간격 */
li {
  margin-top: 0.25em !important;
  margin-bottom: 0.25em !important;
  line-height: 1.65 !important;
}

p {
  line-height: 1.8 !important;
  margin: 0.6em 0 !important;
}

a.gl-pill {
    color: #333;
    padding: 4px 10px; /* 크기 증가 */
    background: #f2f2f2; /* 기본 배경색 추가 */
    border: 1px solid #ccc;
    border-radius: 5px;
    text-decoration: none;
    font-size: 100%; /* 일반 텍스트와 동일 크기 */
    display: inline-block; /* 패딩 적용 안정화 */
}

a.gl-pill:hover {
    background: #eaeaea; /* hover 시 은은하게 강조 */
    border-color: #999;
}
/* ========== GLJAPAN お知らせ（details+summary版） ========== */

.gl-news {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 10px;
}

/* 각 공지 블록 */
.gl-news-item {
  border-bottom: 1px solid #eee;
  padding: 4px 0;
}

/* summary 영역 (한 줄) */
.gl-news-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

/* 브라우저 기본 화살표 제거 */
.gl-news-item summary::-webkit-details-marker {
  display: none;
}

/* 아이콘 ▸ / ▼ */
.gl-news-item summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.2s ease;
  font-size: 0.9em;
}

/* 열려 있을 때 아이콘 ▼ 로 회전 */
.gl-news-item[open] summary::before {
  content: "▼";
  transform: translateY(1px);
}

/* 날짜 */
.gl-news-date {
  color: #666;
  min-width: 90px;
  white-space: nowrap;
}

/* 제목 */
.gl-news-title {
  color: #333;
  flex: 1;
}

/* 열려 있을 때 제목 bold */
.gl-news-item[open] .gl-news-title {
  font-weight: 600;
}

/* 내용 영역 */
.gl-news-body {
  padding: 0 0 6px 18px; /* 아이콘 만큼 들여쓰기 */
  color: #444;
  line-height: 1.6;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

/* details가 open일 때 내용 표시 + 애니메이션 */
.gl-news-item[open] .gl-news-body {
  max-height: 500px; /* 충분히 큰 값 */
  opacity: 1;
}

/* 내용 안의 p 여백 정리 */
.gl-news-body p {
  margin: 0 0 6px 0;
}
/* 모바일에서 탭 영역 넉넉하게 */
@media (max-width: 600px) {
  .gl-news-item summary {
    padding: 10px 0;
  }
  .gl-news-body {
    padding-left: 22px;
  }
}
/* Xリンク：過去のお知らせへの案内 */
.gl-news-more {
  margin-top: 16px;        /* 공지 리스트와 간격만 살짝 */
  text-align: left;
}

.gl-news-more a {
  display: inline-block;   /* 클릭 영역 확보 */
  padding: 2px 0;          /* 살짝 여유만 */
  font-weight: 500;        /* 살짝만 굵게 */
  color: #0066cc;
  text-decoration: none;
}

.gl-news-more a:hover {
  text-decoration: underline;
}

/* お客様の声 スクロールボックス */
.review-scroll {
  max-height: 600px;        /* 내용 많으면 이 높이 안에서만 스クロール */
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

/* 모바일에서 살짝 낮게 */
@media (max-width: 768px) {
  .review-scroll {
    max-height: 450px;
  }
}

/* 각 리뷰 카드 */
.review-card {
  margin-bottom: 20px;
}

.review-card:last-child {
  margin-bottom: 0;
}

.review-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 6px;
}

.review-text {
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

.review-scroll {
  max-height: 420px;              /* 리뷰 영역 최대 높이 (모바일 기준) */
  overflow-y: auto;                /* 안에서만 세로 스크롤 */
  padding: 8px 8px 16px;           /* 안쪽 여백 + 하단 여백 */
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
  overscroll-behavior-y: contain;  /* 안에서 튕겨도 바깥 페이지 덜 움직이게 */
}

/* X 링크는 gl-pill 쓰면 기존 스타일 그대로 사용 */
.review-more .gl-pill {
  font-size: 13px;
}
.contact-wrap {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.contact-wrap iframe {
  margin: 16px auto 0;
  display: block;
}

/* お問い合わせセクション（Formzuラップ） */
.gl-contact-section {
  max-width: 840px;
  margin: 0 auto 24px;   /* 40px → 24px 로 줄임 */
  padding: 0 16px;
}

.gl-contact-head {
  text-align: center;
  margin-bottom: 16px;
}

.gl-contact-head h3 {
  font-size: 18px;
  margin: 0 0 8px;
}

.gl-contact-lead {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* フォーム枠カード */
.gl-contact-card {
  background: #fff;
  border-radius: 12px;
  padding: 12px 12px 8px;   /* 16px → 조금 줄여서 아래 여백 축소 */
  border: 1px solid #eee;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* iframe 自体の整列 */
.gl-contact-card iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* =============================
   GLORY カスタムフッター
   ============================= */

/* footer 안쪽 정렬 & 여백 */
#footer .inner {
  text-align: center;
  padding: 16px 10px 10px;
}

/* 메뉴 리스트 가로 정렬 */
.gl-footer-nav ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;   /* 위아래 6px, 좌우 18px */
}

/* 각 메뉴 항목 */
.gl-footer-nav li {
  margin: 0 !important;
  padding: 0 !important;
}

/* 링크 스타일 */
.gl-footer-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
}

.gl-footer-nav a:hover {
  text-decoration: underline;
}

/* X 아이콘 */
.gl-footer-nav .gl-x img {
  width: 16px;
  height: 16px;
  vertical-align: -2px;
}

/* copyright 줄 */
#copy {
  margin: 8px 0 0 !important;  /* 메뉴와 살짝 간격 */
  padding: 0 !important;
  font-size: 11px;
  line-height: 1.4;
  display: block;
}

/* 스마트폰에서 하단 고정메뉴와 겹치지 않게 */
@media (max-width: 768px) {
  body {
    padding-bottom: 70px !important;  /* 필요하면 60~80 사이로 조정 */
  }
}

<style>
/* FAQ 전체 간격 */
.faq-item {
  margin: 16px 0;  /* 간격 넓히기 */
  padding: 10px 0;
  border-bottom: 1px solid #e5e5e5;
}

/* summary 제목 스타일 */
.faq-item > summary {
  font-size: 17px;       /* 글씨 크기 키움 */
  font-weight: 600;      /* 두껍게 */
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
}

/* summary 기본 화살표 제거 */
.faq-item > summary::-webkit-details-marker {
  display: none;
}

/* summary 앞에 custom 아이콘(▶) */
.faq-item > summary::before {
  content: "▶";
  color: #007aff;
  font-size: 13px;
  margin-right: 6px;
  transition: transform .2s ease;
}

/* 열린 상태일 때 화살표 회전 */
.faq-item[open] > summary::before {
  transform: rotate(90deg);
}

/* 내용 부분 */
.faq-body {
  margin: 6px 0 6px 20px;   /* summary와 내용 간격 + 좌측 들여쓰기 */
  line-height: 1.7;         /* 줄간격 넓게 */
  color: #333;
  font-size: 15px;
}
</style>

<style>
.tokutei-box {
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 16px 18px 12px;
  margin: 20px 0 30px;
  background: #fafafa;
}

.tokutei-title {
  font-size: 18px;
  margin: 0 0 10px;
  font-weight: 600;
  border-bottom: 2px solid #e3e3e3;
  padding-bottom: 6px;
}

.tokutei-list {
  margin: 0;
}

.tokutei-list dt {
  font-weight: 600;
  margin: 12px 0 4px;
  padding-top: 10px;
  border-top: 1px solid #e5e5e5;
  font-size: 14px;
  color: #555;
}

.tokutei-list dt:first-of-type {
  border-top: none;
  padding-top: 4px;
}

.tokutei-list dd {
  margin: 0 0 4px 0;
  padding: 0 0 4px 0;
  line-height: 1.7;
  font-size: 14px;
  color: #333;
}
</style>

/* === 푸터 디자인 수정 (여백 최적화) === */

/* 1. 메뉴와 Copyright 사이 간격 조절 */
.gl-footer-nav {
    margin-bottom: 5px !important;   /* 메뉴 아래 여백 (0에서 5로 살짝 줌) */
    padding-bottom: 0 !important;
    height: auto !important;
}

.gl-footer-nav ul {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#copy {
    display: block;
    margin-top: 0 !important;        /* Copyright 위쪽 여백 제거 */
    padding-top: 0 !important;
    line-height: 1.5 !important;
}

/* 2. 【핵심 수정】 푸터 바닥 여백 줄이기 (120px -> 80px) */
/* 검은색 메뉴바 높이만큼만 딱 띄워서 깔끔하게 만듭니다. */
#footer {
    padding-bottom: 80px !important;
}

/* 3. 전체 스크롤 길이 조정 */
body {
    padding-bottom: 100px !important; /* 이것도 같이 살짝 줄임 */
}

/* ============================================
   [모바일 전용] 갤럭시 A13 등 좁은 화면 헤더 깨짐 방지
   (PC에는 영향 없음)
   ============================================ */
@media screen and (max-width: 768px) {

    /* 1. 헤더의 높이 제한을 풉니다 (글자가 두 줄이 되어도 늘어나도록) */
    #header, #header-wrap, .container, #logo-wrap, #logo, .logo-square {
        height: auto !important;
        min-height: unset !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* 2. 로고와 글자를 옆으로 나란히 정렬 */
    #logo, .logo-square {
        display: flex !important;
        align-items: center !important; /* 수직 중앙 정렬 */
        padding: 5px 10px !important;   /* 위아래, 좌우 여백 확보 */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. 로고 이미지: 작게 고정하고 찌그러짐 방지 */
    #logo img, .img-header {
        display: block !important;
        flex-shrink: 0 !important;      /* 공간 좁아도 로고는 줄어들지 마! */
        width: 45px !important;         /* A13 화면에 딱 맞는 크기 */
        max-width: 45px !important;
        height: auto !important;
        margin-right: 8px !important;   /* 글자와의 간격 */
    }

    /* 4. 제목 글자: 좁으면 알아서 줄바꿈 & 크기 조절 */
    .logotext {
        display: block !important;
        flex: 1 !important;             /* 남은 공간 꽉 채우기 */
        font-size: 12px !important;     /* 글자 크기를 12px로 조정 */
        line-height: 1.3 !important;    /* 줄 간격 좁게 */
        white-space: normal !important; /* 줄바꿈 허용 */
        word-break: break-all !important; /* 영어 단어(Naver)가 길면 잘라서라도 줄바꿈 */
        text-align: left !important;
        overflow: visible !important;
    }
}