@charset "UTF-8";

/* 기본 색상 */
:root {
    --main-color: #000;
    --accent-color: #000;
    --dark-main-color: #000;
    --text-bright-color: #fff;
    --icon-color: #fff;
    --icon-bk-color: #ddd;
    --gray-color: #ddd;
    --large-width: 1000px;
    --middle-width: 800px;
}

/* 기본 설정: 폰트 크기 */
@media (max-width: 599px) {
    :root { font-size: 14px; }
}
@media (min-width: 600px) and (max-width: 799px) {
    :root { font-size: 16px; }
}
@media (min-width: 800px) {
    :root { font-size: 18px; }
}

body { 
    font-size: 16px;
    margin: 0;           
    padding: 0;          
    background: #000;    
    color: #fff;
    /* 👇 추가된 부분 */
    font-family: 'Montserrat', 'Noto Sans KR', 'Helvetica Neue', Arial, sans-serif; 
    /* 폰트 로딩 실패 시, iOS/Android/Windows 기본 폰트 사용 */
}

/* ================= HEADER 공통 ================= */

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: rgba(0,0,0,1);
    padding: 8px 0 14px;
  }
  
  header.scrolled {
    background-color: rgba(0,0,0,0.7);
    transition: background-color 0.4s ease;
  }
  
  header .container {
    position: relative;
    max-width: var(--large-width);
    margin: 0 auto;
    height: 80px;
  }
  
  /* 로고: PC 기준 가운데 */
  .headA {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .headA img {
    height: 90px;
    display: block;
  }
  
  /* PC 메뉴: 오른쪽 가로 정렬 */
  .headB {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    display: block;
  }
  
  .headB ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 24px;
  }
  
  .headB li {
    margin: 0;
    padding: 0;
  }
  
  .headB a {
    display: block;
    padding: 4px 0;
    color: #fff;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-decoration: none;
  }
  
  .headB a:hover {
    text-decoration: underline;
  }
  
  /* 햄버거: PC에서는 숨김 */
  .headC {
    display: none;
  }
  
  /* ================= MOBILE HEADER ================= */
  @media (max-width: 767px) {
  
    /* 헤더를 맨 위에 고정 + 본문 잘리지 않게 패딩 */
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 10px 0;
      background: rgba(0,0,0,0.95);
      z-index: 9999;
    }
  
    body {
      padding-top: 90px;   /* 헤더 높이만큼 내려주기 */
    }
  
    header .container {
      height: 70px;
      padding: 0 16px;
    }
  
    .container-small {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      width: 100%;
    }
  
    /* 로고: 가운데 */
    .headA {
      position: static;
      transform: none;
      margin: 0 auto;
    }
  
    .headA img {
      height: 55px;
    }
  
    /* 햄버거 버튼: 오른쪽 */
    .headC {
      display: block;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      font-size: 30px;
      color: #fff;
      cursor: pointer;
    }
  
    /* 드롭다운 메뉴: 헤더 바로 아래, 화면 꽉 채우는 세로 리스트 */
    .headB {
      position: absolute;
      top: 90px;          
      left: 0;
      width: 100%;
      display: none;      /* jQuery slideToggle 대상 */
      background: rgba(0,0,0,0.98);
      text-align: center;
      padding-bottom: 10px;
      z-index: 9998;
    }
  
    .headB ul {
      display: block;
      margin: 0;
      padding: 0;
      list-style: none;
      width: 100%;
    }
  
    .headB li {
      display: block;
      width: 100%;
      padding: 14px 0;
      border-bottom: 1px solid rgba(255,255,255,0.25);
    }
  
    .headB li:last-child {
      border-bottom: none;
    }
  
    .headB a {
      display: block;
      width: 100%;
      color: #fff;
      font-size: 16px;
      letter-spacing: 0.12em;
      text-decoration: none;
    }
  }
  

/* ===== nohero 페이지는 본문 위로 패딩 추가 ===== */
body.nohero {
    padding-top: 130px;
}
@media (max-width: 767px) {
    body.nohero {
      padding-top: 100px;
    }
}

/* ========= ABOUT 상단 섹션 ========= */

.aboutHero {
    background: #000;
    color: #ccc;
    padding: 80px 20px 40px;
}
.aboutHero .container {
    max-width: var(--middle-width);
    margin: 0 auto;
}

/* about 페이지 상단 문양 (mark.png 사용) */
.ornament-top {
    height: 40px;
    background: url("img/mark.png") no-repeat center;
    background-size: contain;
    margin-bottom: 50px;
}

/* ========= INDEX / 공통 문양 라인 ========= */
/* 흰 선 없이, 골드 문양만 딱 가운데 나오게 */
.ornament-divider {
    width: 100%;
    height: 40px;
    margin: 60px 0;
    background: url("img/mark.png") no-repeat center; 
    background-size: 120px auto; 
}
@media (max-width: 768px) {
    .ornament-divider {
        margin: 40px 0;
        background-size: 90px auto; 
    }
}

.about-title {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    text-align: center;
    letter-spacing: 0.15em;
    margin: 0 0 30px;
}
  
/* 메인 섹션 레이아웃 (PC 기본: Sticky) */
.about-main {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* PC: Sticky Wrapper 설정 */
.about-portrait-wrapper {
    flex-shrink: 0;
    width: 280px;
}

/* PC: 초상화 고정 설정 */
.about-portrait {
    position: sticky;
    top: 100px;
    width: 100%;
}
.about-portrait img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
  
/* 타임라인 텍스트 영역 */
.about-info {
    flex: 1;
    min-height: 1200px;
}
.year-block {
    margin: 0 0 80px;
    font-size: 1.05rem;
    line-height: 1.6;
    padding: 20px;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
}
.year-block .year {
    font-family: 'Cinzel', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #896e0b;
    display: block;
    margin-bottom: 10px;
    line-height: 1;
}

/* Artwork 버튼 */
.about-btn {
    display: block;
    width: 160px;
    margin: 24px auto 0;
    padding: 10px 0;
    border-radius: 999px;
    border: 1px solid #ccc;
    text-align: center;
    text-decoration: none;
    color: #ccc;
    font-size: 0.95rem;
}

/* --- ABOUT 모바일 --- */
@media (max-width: 768px) {
    .about-main {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .about-portrait-wrapper {
        width: 100%;
        max-width: 300px;
        margin-bottom: 20px;
    }
    .about-portrait {
        position: static;
        top: auto;
    }
    .about-portrait img {
        height: auto;
        max-height: 300px;
    }

    .about-info {
        min-height: auto;
        padding: 0;
        width: 100%;
    }
    .year-block {
        margin-bottom: 40px;
        padding: 10px 0;
        border-left: none;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
    }
    .year-block:last-child {
        border-bottom: none;
    }
    .year-block .year {
        font-size: 2rem;
    }

    .area-grid {
        flex-direction: column;
        gap: 30px;
    }
    .area-item {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
}
  
/* ========= BRUN IN YOUR AREA ========= */
.aboutArea {
    padding: 40px 0;
    text-align: center;
    background-color: #111;
}
.area-title {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    margin-bottom: 30px;
    color: #ccc;
}
.area-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}
.area-item {
    width: 32%;
}
.area-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* 콘텐츠A: 히어로 이미지 (현재 Swiper로 대체 가능) */
.conA {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    min-height: 300px;
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.1)), url(img/hero.png);
    background-position: center;
    background-size: cover;
    color: var(--text-bright-color);
    text-align: center; 
}
.conA a {
    color: var(--text-bright-color);
    text-decoration: none;
}
.conA a:hover {
    text-decoration: underline;
}

/* 모바일 conA */
@media (max-width: 767px) {
    .conA {
      height: 70vh;      
      min-height: 420px;
    }
    .conA .swiper {
      height: 100%;
    }
    .conA .swiper-slide img {
      object-fit: cover;    
    }
    .conA .hero-more {
      bottom: 8%;
      font-size: 12px;
      padding: 8px 20px;
    }
}
  

/* M 콘텐츠B: 개요 (작품 카드) */
.conB {
    background-position: center;
    background-size: cover;
    color: #ccc;
    margin-top: 70px;
    margin-bottom: 100px;
}
.conB h1 {
    margin-top: 100px;
    margin-bottom: 10px;
    font-family: 'Cinzel', sans-serif;
    letter-spacing: 0.2em;
    margin-left: 0.2em;
    font-size: 4vw;
    text-align: center;
}
.conB a {
    color: var(--text-bright-color);
    text-decoration: none;
    border: none !important;
    outline: none !important;
    background: none !important;
    box-shadow: none !important;
}
.conB .container {
    padding-top: 50px;
    padding-bottom: 20px;
}
.conB .text {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
    text-align: center;
}
.conB .text img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 20px;
}
.conB h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 18px;
}
.conB p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.8;
}

/* PC-콘텐츠B: 가로 3단 카드 */
@media (min-width: 768px) {
    .conB .container {
        display: flex;
        max-width: var(--large-width);
        margin-left: auto;
        margin-right: auto;
    }
    .conB .text {
        flex: 1;
        max-width: none;
    }
}

/* 모바일-콘텐츠B */
@media (max-width: 767px) {
    .conB {
        margin-top: 60px;
        margin-bottom: 80px;
    }
    .conB h1 {
        font-size: 8vw;
        margin-top: 60px;
    }
    .conB .container {
        display: block;
        padding: 40px 20px 20px;
    }
    .conB .text {
        width: 100%;
        max-width: 360px;
        margin: 0 auto 40px;
        padding-left: 0;
        padding-right: 0;
    }
    .conB .text img {
        max-width: 100%;
        margin-bottom: 16px;
    }
    .conB h2 {
        font-size: 1.2rem;
    }
    .conB p {
        font-size: 0.9rem;
    }
    .conB a {
        display: inline-block;
        padding: 8px 20px;
        border: 1px solid #fff;
        font-size: 0.9rem;
    }
}

/* conC: Artwork 슬라이더 */
@media (max-width: 767px) {
    .conC {
        padding: 60px 0 40px;
        margin-bottom: 100px;
    }
    .conC h2 {
        font-size: 1.8rem;
        text-align: center;
        margin-bottom: 24px;
    }
}

/* 공통 슬라이더 스타일 */
.conC.artCarousel {
    padding: 80px 0 60px;
    background-color: #000;
    text-align: center;
}
.conC .artCarousel-title {
    margin: 0 0 40px;
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: #ccc;
}
.conC .artCarousel-inner {
    max-width: var(--large-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}
.conC .art-nav {
    background: none;
    border: none;
    color: var(--text-bright-color);
    font-size: 2.4rem;
    cursor: pointer;
    padding: 10px;
    transition: opacity .25s;
    position: relative !important;
}
.conC .art-nav:hover {
    opacity: 0.5;
}
.conC .art-window {
    overflow: hidden;
    flex: 1;
}
.conC .art-track {
    display: flex;
    gap: 20px;
    transition: transform .4s ease;
}
.conC .art-card {
    flex: 0 0 180px;
    height: 220px;
    background: #444;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0,0,0,.5);
    transform: translateY(0) scale(1);
    transition: transform .25s ease, box-shadow .25s ease;
    margin-bottom: 50px;
}
.conC .art-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.conC .art-card:hover {
    transform: translateY(-18px) scale(1.06);
    box-shadow: 0 18px 35px rgba(0,0,0,.7);
}
@media (max-width: 767px) {
    .conC.artCarousel {
      padding: 40px 0 30px;
    }
    .conC .artCarousel-title {
      font-size: 1.8rem;
      margin-bottom: 25px;
    }
    .conC .artCarousel-inner {
      padding: 0 10px;
      gap: 10px;
    }
    .conC .art-nav {
      font-size: 24px;
      margin: 0 5px;
      opacity: .5;
    }
    .conC .art-window {
      flex: 1;
      overflow: hidden;
    }
    .conC .art-track {
      gap: 12px;
      transition: transform .3s ease;
    }
    .conC .art-card {
      flex: 0 0 120px;
      height: 150px;
      margin-bottom: 100px;
    }
}

/* conD: Versailles 이미지 섹션 */
.conD .container {
    padding-top: 2px;
}
.conD .text {
    padding: 20px;
}
.conD .photo {
    min-height: 500px;
    background-image: url(img/hero7.jpg);
    background-position: center;
    background-size: cover;
}
@media (min-width: 768px) {
    .conD .container {
        display: flex;
        flex-direction: row-reverse;
        max-width: var(--large-width);
        margin-left: auto;
        margin-right: auto;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .conD .photo {
        flex: 100%;
        min-height: 790px;
        background-image: url(img/hero7.jpg);
        margin-bottom: 50px;
    }
    .conD .text {
        flex: 1;
        padding: 50px;
    }
}

/* conE: 비디오 */
.conE {
    background-color: var(--main-color);
    color: var(--text-bright-color);
}
.conE .text {
    padding: 20px;
}
.conE h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 20px;
}
.conE p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.8;
    opacity: 0.8;
}
.conE video {
    width: 100%;
}

/* contact 페이지: 문의 대상 */
.contact {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    border: solid 1px var(--gray-color);
    text-align: center;
}
.contact h2 {
    margin-top: 0;
}
@media (min-width: 768px) {
    .contact-wrap {
        display: flex;
    }
    .contact {
        flex: 1;
    }
    .contact:first-child {
        margin-right: 20px;
    }
}
.contact span {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 2.2rem;
    width: 2em;
    line-height: 2em;
    border-radius: 50%;
    text-align: center;
    background-color: var(--main-color);
    color: var(--icon-color);
}
.contact h2 {
    margin-top: 0;
    font-size: 1.2rem;
}
.contact a{
    font-size: 1.4rem;
    color: inherit;
    text-decoration: none;
}

/*문의 페이지: 지도 */
.location iframe {
    width: 100%;
    height: 400px;
    vertical-align: bottom;
}
.location h2 {
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: var(--main-color);
    color: var(--text-bright-color);
    font-size: 2rem;
    text-align: center;
    font-family: 'Cinzel', serif;
}

/* ================= FOOTER – 심플 버전 ================= */

footer {
    background-color: var(--dark-main-color);
    color: var(--text-bright-color);
}
.footer-simple {
    padding: 40px 20px 30px;
}
.footer-inner {
    max-width: var(--large-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}
.footer-name {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    letter-spacing: 0.14em;
    line-height: 1.1;
    text-align: center;
}
.footer-right {
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-icons {
    display: flex;
    gap: 20px;
    font-size: 1.6rem;
    color: #5c5c5c;
}
.footer-icons a {
    color: inherit;
    text-decoration: none;
}
.footer-ornament {
    margin-top: 20px;
    text-align: center;
}
.footer-ornament img {
    width: 200px;
    display: inline-block;
    opacity: 0.9;
}
.footC {
    font-size: 12px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    margin-top: 20px;
    opacity: 0.8;
    color: #6d6b6bf4;
}
@media (max-width: 767px) {
    .footer-inner {
      flex-direction: column;
      align-items: center;
    }
    .footer-name {
      font-size: 1.4rem;
    }
    .footer-icons {
      font-size: 1.4rem;
      margin-bottom: 10px;
    }
    .footer-ornament img {
      width: 150px;
    }
    .footC {
        margin-top: 30px;
        text-align: center;
    }
}

/* ===================== ARTWORK PAGE ===================== */

.artwork-page {
    padding-top: 120px;
}
.artSearch {
    text-align: center;
    padding: 40px 20px 20px;
}
.artSearch-inner {
    max-width: var(--middle-width);
    margin: 0 auto;
}
.artSearch-title {
    margin: 0 0 20px;
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    letter-spacing: 0.15em;
}
.artSearch-bar {
    display: flex;
    align-items: center;
    margin: 0 auto;
    max-width: 360px;
    background: #111;
    border: 1px solid #555;
    border-radius: 999px;
    padding: 6px 12px;
}
.artSearch-bar input {
    flex: 1;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
}
.artSearch-bar input::placeholder {
    color: #777;
}
.artSearch-bar .btn-search {
    border: none;
    background: none;
    color: #ccc;
    font-size: 1rem;
    cursor: pointer;
}

/* 카드 리스트 */
.artList {
    padding: 20px 20px 40px;
}
.artList-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 40px;
    max-width: var(--large-width);
    margin: 0 auto;
}
.artCard {
    text-align: left;
    font-size: 0.9rem;
}
.artCard-thumb {
    background: #333;
    margin-bottom: 10px;
}
.artCard-thumb img {
    display: block;
    width: 100%;
    height: auto;
}
.artCard-title {
    margin: 0 0 4px;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
}
.artCard-meta {
    margin: 0;
    font-size: 0.8rem;
    opacity: 0.7;
}
.artList-paging {
    margin-top: 30px;
    text-align: center;
}
.artList-paging a {
    display: inline-block;
    margin: 0 4px;
    padding: 4px 8px;
    font-size: 0.85rem;
    text-decoration: none;
    color: #aaa;
}
.artList-paging a.is-active {
    color: #fff;
    border-bottom: 1px solid #fff;
}

/* 모자이크 영역 */
.artMosaic {
    padding: 40px 20px 60px;
}
.artMosaic-grid {
    max-width: var(--large-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}
.mosaic-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.m-large {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
}
.m-vert:nth-of-type(2) {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}
.m-vert:nth-of-type(3) {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}
.m-wide {
    grid-column: 1 / 3;
}

/* 장식 문양 띠 (artwork 등에서 쓰는 버전) */
.ornament-band {
    height: 40px;
    background: url("img/mark2.png") no-repeat center;
    background-size: contain;
    margin: 40px auto 30px;
}
.ornament-band--center {
    margin-top: 40px;
    margin-bottom: 40px;
}
.ornament-band--bottom {
    margin-top: 40px;
    margin-bottom: 0;
}

/* artwork 모바일 */
@media (max-width: 767px) {
    .artwork-page {
      padding-top: 90px;
    }
    .artSearch-title {
      font-size: 1.2rem;
      letter-spacing: 0.12em;
    }
    .artList-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }
    .artMosaic-grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
    }
    .m-large,
    .m-vert:nth-of-type(2),
    .m-vert:nth-of-type(3),
    .m-wide {
      grid-column: auto;
      grid-row: auto;
    }
}

/* ========================= CONTACT PAGE ========================= */

.contactPage {
    background: #000;
    color: #ccc;
    padding-top: 120px;
    padding-bottom: 80px;
    font-family: "Montserrat", "Noto Sans KR", sans-serif;
}
.contactPage .container {
    max-width: var(--large-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* contact 상단 문양 띠 */
.contactPage .ornament-band {
    width: 100%;
    height: 40px;
    background: url("img/mark.png") no-repeat center;
    background-size: 140px auto;
    margin: 20px 0 30px;
}

/* 섹션 안의 작은 문양 */
.contactPage .ornament {
    width: 140px;
    height: 30px;
    margin: 24px auto;
    background: url("img/mark.png") no-repeat center;
    background-size: contain;
    opacity: 0.9;
}

/* CONTACT & VISIT 상단 */
.contactIntro {
    margin-bottom: 60px;
}
.contactIntro .page-title {
    font-family: "Cinzel", serif;
    font-size: 2rem;
    text-align: center;
    letter-spacing: 0.14em;
    margin: 0 0 10px;
}
.contact-top {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-top: 20px;
}
.contact-photo {
    flex: 0 0 260px;
    max-width: 260px;
}
.contact-photo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.contact-info {
    flex: 1;
}
.contact-info .museum-name {
    font-family: "Cinzel", serif;
    font-size: 1.1rem;
    line-height: 1.5;
    margin: 0 0 24px;
}
.contact-info .contact-label {
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: 0.8;
}
.contact-icons {
    display: flex;
    gap: 18px;
    font-size: 1.6rem;
}
.contact-icons a {
    color: var(--text-bright-color);
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.contact-icons a:hover {
    transform: translateY(-2px);
    opacity: 0.7;
}

/* 뉴스레터 */
.newsletter {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 50px;
}
.newsletter h3 {
    font-family: "Cinzel", serif;
    font-size: 1.2rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 30px 0 24px;
}
.newsletter-form {
    max-width: 380px;
    margin: 0 auto;
}
.newsletter-form input[type="email"] {
    width: 100%;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #777;
    background: transparent;
    color: var(--text-bright-color);
    font-size: 0.9rem;
    outline: none;
    box-sizing: border-box;
}
.newsletter-form input[type="email"]:focus {
    border-color: #d7b667;
    box-shadow: 0 0 0 1px #d7b667;
}
.newsletter-form button {
    margin-top: 14px;
    width: 160px;
    padding: 9px 0;
    border-radius: 999px;
    border: 1px solid #d7b667;
    background: transparent;
    color: var(--text-bright-color);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease,
                transform 0.15s ease, box-shadow 0.15s ease;
}
.newsletter-form button:hover {
    background: #d7b667;
    color: #000;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.5);
}
.newsletter-form button:active {
    transform: translateY(1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.6);
}

/* 인용구 (공통 스타일) */
.contactQuote {
    margin-top: 20px;
}
.contactQuote .quote {
    font-family: "Playfair Display", "Cinzel", serif;
    font-size: 1.25rem;
    line-height: 1.6;
    text-align: left;
    max-width: 480px;
    margin: 0 auto 12px;
    color: #5c5c5c;
}
.contactQuote .quote-by {
    font-family: "Cinzel", serif;
    font-size: 0.9rem;
    text-align: right;
    max-width: 480px;
    margin: 0 auto;
    opacity: 0.8;
}

/* contactIntro 우측 텍스트 박스 인용구 */
.contactIntro .contact-quote-block {
    margin-top: 20px;
}
.contactIntro .contact-quote-block .quote {
    font-family: "Playfair Display", "Cinzel", serif;
    font-size: 1.5rem;    
    line-height: 1.5;
    color: #ccc;        
    text-align: left;   
    margin-bottom: 8px;
}
.contactIntro .contact-quote-block .quote-by {
    font-family: "Cinzel", serif;
    font-size: 0.85rem;
    opacity: 0.7;
    text-align: right;
}

/* contact PC 상세 조정 */
@media (min-width: 992px) {
    .contactIntro .page-title {
      font-size: 2.2rem;
    }
    .contactQuote .quote {
      font-size: 1.35rem;
    }
}

/* contact MOBILE 레이아웃 */
@media (max-width: 767px) {
    .contactPage {
      padding-top: 100px;
      padding-bottom: 60px;
    }
    .contactPage .container {
      padding: 0 16px;
    }
    .contactIntro .page-title {
      font-size: 1.6rem;
    }
    .contact-top {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .contact-photo {
      max-width: 260px;
      margin-bottom: 20px;
    }
    .contact-info {
      width: 100%;
    }
    .contact-info .museum-name {
      font-size: 1rem;
    }
    .contact-icons {
      justify-content: center;
    }
    .contactQuote .quote,
    .contactQuote .quote-by {
      text-align: center;
    }
}

/* ===== FIX: index 페이지 문양 (mark.png 사용) ===== */
.ornament-divider {
    width: 100%;
    height: 40px;
    margin: 60px 0;
    background: url("img/mark.png") no-repeat center; 
    background-size: 120px auto; /* 🔥 PC 크기 수정: 80px -> 120px */
    border: none;
  }
  
  @media (max-width: 768px) {
    .ornament-divider {
      margin: 40px 0;
      background-size: 90px auto; /* 🔥 모바일 크기 수정: 60px -> 90px */
    }
}

h1 {
    color: #bebebe; /* 흰색(#fff)에서 한 톤 다운된 밝은 회색 */
}