.responsive-iframe {
          width: 540px;
          height: 960px; /* 기본 높이 */
        }

        @media (max-width: 768px) {
          .responsive-iframe {
            width: 360px;
            height: 640px; /* 모바일 환경 높이 */
          }
        }

.linkimg
{
Padding: 10px
}


/* 반응형 웹 디자인을 위한 스타일시트 */
:root {
    --color-primary: #2565d0;
    --color-primary-dark: #165bb8;
    --color-primary-light: #e6f0ff;
    --color-text: #323232;
    --color-background: #f8f9fa;
    --color-white: #ffffff;
    --font-sans: 'Nanum Gothic', sans-serif;
    --spacing-unit: 8px;
    --border-radius: 8px;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    line-height: 1.6;
    background-color: #f0f4fa;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    text-align: center; /* 전체 텍스트 가운데 정렬 */
}

/* 모바일 우선 접근법 */
.container {
    width: 100%;
    padding: 0;
    margin: 0 auto;
    max-width: 100%;
    text-align: center; /* 컨테이너 내부 텍스트 가운데 정렬 */
}

/* 메뉴 스타일 */
.menu-background {
    background-color: var(--color-primary);
    padding: 0; /* 상단 '이 공간은 없어야 함'을 제거하기 위해 패딩 제거 */
    width: 100%;
    position: relative;
    top: 0;
    z-index: 1000;
    box-shadow: none; /* 그림자 제거 */
    text-align: center; /* 메뉴 배경 내부 텍스트 가운데 정렬 */
}

.menu-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding: 3px 12px; /* '여기는 얇아져야 함' 영역 패딩 축소 */
}

.menu-container a, 
.menu-container button {
    padding: 4px 10px; /* '여기는 얇아져야 함'을 위해 버튼 내부 패딩 축소 */
    border-radius: var(--border-radius);
    border: 1px solid var(--color-white);
    background-color: transparent;
    color: var(--color-white);
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
    text-decoration: none;
    text-align: center;
    min-width: 100px;
}

.menu-container a:hover, 
.menu-container button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.active-menu {
    background-color: var(--color-white) !important;
    color: var(--color-primary) !important;
    font-weight: bold !important;
}

/* ==================================================================== */
/* 기본 콘텐츠 영역 스타일 (모든 페이지에 적용) */
/* ==================================================================== */

/* 기본 콘텐츠 영역 스타일 */
.content-area {
    padding: 20px;
    text-align: center; /* 콘텐츠 영역 내부 텍스트 가운데 정렬 */
}

/* ==================================================================== */
/* guide.html 페이지 전용 스타일 */
/* ==================================================================== */

/* .page-container: absolute 요소의 기준점 설정 */
.page-container {
    position: relative; /* 자식 요소의 absolute 위치 기준 */
    width: 100%; /* 필요에 따라 너비 설정, 기존 레이아웃에 맞게 조절 */
    margin: 0 auto;
    background-color: var(--color-white);
    border-radius: 0; /* 모서리 둥글게 제거 */
    box-shadow: none; /* 그림자 제거 */
    overflow: hidden;
    text-align: center; /* 페이지 컨테이너 내부 텍스트 가운데 정렬 */
    font-size: 0; /* 이미지 사이 간격 제거 */
    line-height: 0; /* 이미지 사이 간격 제거 */
}

/* .img-container: 이미지를 텍스트 위에 보이도록 설정 */
.img-container {
    position: relative; /* z-index가 적용되도록 설정 */
    z-index: 2; /* 텍스트(z-index: 1)보다 높게 설정하여 텍스트 위에 배치 */
    max-width: 100%; /* 이미지 컨테이너 너비 제한 */
    height: auto;
    margin: 0; /* 공간 제거를 위해 마진 제거 */
    padding: 0; /* 공간 제거를 위해 패딩 제거 */
    text-align: center; /* 이미지 컨테이너 내부 가운데 정렬 */
    display: block;
    line-height: 0; /* 이미지 아래 공간 제거 */
    font-size: 0; /* 이미지 사이 공간 제거 */
}

.img-responsive {
    width: 100%;
    height: auto;
    display: block;
    margin: 0; /* 이미지 마진 제거 */
    padding: 0; /* 이미지 패딩 제거 */
    vertical-align: top; /* 이미지 하단 공간 제거 */
}

/* guide.html 페이지의 .content-area: 텍스트를 이미지 뒤로 숨기고, 검색 엔진은 읽을 수 있게 설정 */
.page-container .content-area {
    position: absolute; /* 부모인 .page-container 기준으로 위치 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 이미지 크기에 맞춰 영역 차지 */
    z-index: 1; /* 이미지(z-index: 2)보다 낮게 설정하여 이미지 뒤로 보냄 */
    opacity: 0.01; /* 텍스트를 거의 투명하게 만들지만 완전히 투명하진 않게 설정 */
    overflow: hidden; /* 혹시 모를 내용 넘침 방지 */
    pointer-events: none; /* 텍스트가 클릭되거나 선택되지 않도록 함 */
    color: rgba(0,0,0,0.01); /* 텍스트 색상을 거의 투명하게 설정 */
}

/* ==================================================================== */
/* 기존 스타일 (변경 없이 유지) */
/* ==================================================================== */

/* 제목 스타일 */
h1, h2, h3, h4, h5, h6 {
    text-align: center; /* 모든 제목 태그 가운데 정렬 */
    margin-bottom: 1rem;
}

/* 문단 스타일 */
p {
    text-align: center; /* 모든 문단 가운데 정렬 */
    margin-bottom: 1rem;
}

/* 리스트 스타일 */
ul, ol {
    text-align: center; /* 리스트 정렬 */
    list-style-position: inside; /* 리스트 기호를 내부로 이동 */
    margin-bottom: 1rem;
}

/* 양식 스타일 */
.form-container {
    max-width: 100%;
    margin: 24px auto;
    padding: 24px 16px;
    background-color: var(--color-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    text-align: center; /* 폼 컨테이너 내부 텍스트 가운데 정렬 */
}

/* 입력 폼 스타일 */
.form-group {
    margin-bottom: 16px;
    text-align: center; /* 폼 그룹 내부 텍스트 가운데 정렬 */
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    text-align: center; /* 레이블 텍스트 가운데 정렬 */
}

.form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    font-size: 1rem;
    text-align: center; /* 입력 필드 내부 텍스트 가운데 정렬 */
}

.form-submit {
    width: 100%;
    padding: 12px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: var(--transition);
    margin-top: 16px;
    text-align: center; /* 제출 버튼 내부 텍스트 가운데 정렬 */
}

.form-submit:hover {
    background-color: var(--color-primary-dark);
}

/* 버튼과 링크 */
.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: bold;
    transition: var(--transition);
    text-align: center;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
}

/* guide.html 특정 스타일 */
.fixed-height-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center; /* 컨테이너 내부 텍스트 가운데 정렬 */
}

.layered-image {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 2;
    margin: 0 auto; /* 이미지 가운데 정렬 */
}

/* 반응형 테이블 */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto; /* 테이블 가운데 정렬 */
    text-align: center; /* 테이블 내부 텍스트 가운데 정렬 */
}

.responsive-table td {
    padding: 12px 8px;
    text-align: center; /* 테이블 셀 내부 텍스트 가운데 정렬 */
}

@media (max-width: 768px) {
    /* 모바일에서 이미지 뒤 텍스트 숨기기 설정 */
    /* .page-container, .img-container, .content-area 스타일은 위에 공통으로 정의되어 있으므로 여기서는 추가적인 변경이 필요 없습니다. */
    /* 다만, 이미 .page-container에 position: relative가 적용되었으므로, 해당 미디어 쿼리 블록에서 중복 선언을 제거했습니다. */

    .responsive-table, 
    .responsive-table tbody, 
    .responsive-table tr, 
    .responsive-table td {
        display: block;
        width: 100%;
        text-align: center; /* 모바일에서 테이블 내용 가운데 정렬 */
    }
    
    .responsive-table tr {
        margin-bottom: 16px;
    }
    
    .responsive-table .label-cell {
        font-weight: bold;
        text-align: center; /* 모바일에서 레이블 가운데 정렬 */
        padding-bottom: 4px;
    }
    
    .form-submit {
        padding: 14px;
        font-size: 1.1rem;
    }
    
    /* 모바일에서 리스트 아이템 가운데 정렬 */
    ul li, ol li {
        text-align: center;
        list-style-position: inside;
    }
}

/* 태블릿 이상 */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
    
    .menu-container a, 
    .menu-container button {
        padding: 4px 16px; /* '여기는 얇아져야 함'을 위해 버튼 내부 패딩 축소 */
        font-size: 1rem;
        min-width: 120px;
    }
    
    .content-area {
        padding: 32px;
    }
    
    .form-container {
        padding: 32px;
        max-width: 600px;
    }
    
    .form-submit {
        width: auto;
        min-width: 200px;
        margin: 16px auto; /* 태블릿 이상에서 버튼 가운데 정렬 */
        display: block; /* 가운데 정렬을 위해 블록 레벨 요소로 변경 */
    }
}

/* 데스크탑 */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

/* 대형 디스플레이 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* iOS 특정 수정사항 */
@supports (-webkit-touch-callout: none) {
    /* iOS에만 적용되는 CSS */
    input, textarea, select {
        font-size: 16px; /* iOS에서 자동 확대를 방지 */
        text-align: center; /* iOS에서 입력 필드 가운데 정렬 */
    }
    
    .btn, button {
        -webkit-appearance: none; /* iOS 기본 스타일 제거 */
        border-radius: var(--border-radius);
    }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #e1e1e1;
        --color-background: #2a2a2a;
    }
    
    body {
        background-color: #1a1a1a;
    }
    
    .page-container {
        background-color: #333;
    }
    
    .form-input {
        background-color: #444;
        color: #fff;
        border-color: #555;
    }
}

/* 접근성 향상 */
:focus {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* 순서 목록 특수 스타일 */
ol {
    counter-reset: item;
    list-style-type: none;
    padding-left: 0;
}

ol li {
    counter-increment: item;
    margin-bottom: 8px;
    text-align: center;
}

ol li::before {
    content: counter(item) ". ";
    display: inline-block;
    margin-right: 4px;
}

/* 버튼 정렬 */
.btn-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

/* 순서 없는 목록 스타일 */
ul {
    list-style-type: none;
    padding-left: 0;
}

ul li {
    margin-bottom: 8px;
    text-align: center;
}

ul li::before {
    content: "• ";
    display: inline-block;
    margin-right: 4px;
}

/* 로딩 메시지 스타일 */
.loading {
    text-align: center;
    margin: 20px auto;
    font-weight: bold;
    color: var(--color-primary);
}

/* 알림 메시지 스타일 */
.notice {
    text-align: center;
    padding: 12px;
    margin: 16px auto;
    border-radius: var(--border-radius);
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    max-width: 600px;
}