@charset "utf-8";

/*
 * 제주창암재활원 반응형 보완 CSS
 * - 기존 PC 디자인을 유지하면서 태블릿/모바일에 대응합니다.
 * - /theme/basic/head.sub.php에서 마지막 순서로 불러옵니다.
 */

:root {
    --changam-content-max: 1180px;
    --changam-wide-max: 1500px;
    --changam-side-gap: 20px;
    --changam-brand: #c4004b;
    --changam-accent: #f7cf5d;
    --changam-text: #202124;
    --changam-border: #e4e6e8;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-width: 0;
    overflow-x: visible;
}

body.changam-menu-open {
    overflow: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

#hd,
#wrapper,
#ft {
    min-width: 0 !important;
}

/* ------------------------------
   Header: fluid desktop shell
------------------------------ */
.changam-topbar {
    width: 100%;
    min-height: 32px;
}

.changam-header-inner {
    position: relative;
    width: 100%;
    /*max-width: var(--changam-wide-max);*/
    height: 80px;
    margin: 0 auto;
}

#hd_wrapper {
    width: min(var(--changam-content-max), calc(100% - 40px));
    max-width: 100%;
}

.changam-menu-toggle,
.changam-menu-dim,
.changam-mobile-utility {
    display: none;
}

/* The all-menu is still used as the mobile drawer. */
#gnb_all {
    box-sizing: border-box;
}

.submenu-logo-space,
.submenu-list-space {
    float: left;
}

.submenu-logo-space {
    width: 27.6923%;
}

.submenu-list-space {
    width: 72.3077%;
}

/* ------------------------------
   Main page: remove fixed canvas
------------------------------ */
#mainBg {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
}

#slider,
.slide,
.main_visual {
    width: 100%;
    max-width: 100%;
}

.main_cards ul,
.main_notice {
    width: min(1117px, calc(100% - 40px));
    max-width: 100%;
}

.quick_wrap,
.stats,
.tabs,
.tab_box,
.btn-wrap,
.d_flex {
    min-width: 0;
}

/* YouTube and other media embedded in content */
#container iframe[src*="youtube.com"],
#container iframe[src*="youtu.be"],
#mainBg iframe[src*="youtube.com"],
.video-wrap iframe,
.video_box iframe {
    display: block;
    width: 100% !important;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto !important;
}

/* ------------------------------
   Sub pages: fluid two-column shell
------------------------------ */
#submenu {
    width: min(1300px, calc(100% - 40px)) !important;
    max-width: 100%;
}

#container_wr {
    width: min(1280px, calc(100% - 40px)) !important;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

body[data-page="index"] #container_wr,
body[data-page="index"] #container {
    width: 100% !important;
    max-width: none;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

#leftArea,
#container,
.content {
    max-width: 100%;
}

#container {
    min-width: 0;
}

#wrapper img.sub-bg {
    width: 100% !important;
    max-width: 1700px;
    height: auto;
}

/* Prevent common content blocks from forcing horizontal overflow. */
.content,
.status-table,
.asset-table,
.asset-table2,
.asset-table3,
.board-table,
.table_st1,
.siseol_img,
.cnt-box,
.bbs_search01 {
    max-width: 100%;
}

.tbl_wrap,
.tbl_head01,
.tbl_frm01,
.table-responsive,
.board-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ------------------------------
   Footer: fluid desktop shell
------------------------------ */
#iris_footer .iris_footer_inner {
    width: min(1117px, calc(100% - 40px));
    max-width: 100%;
}

#iris_footer .iris_footer_info {
    max-width: 100%;
}

#ft_wr,
#ft_copy {
    width: min(1200px, calc(100% - 40px));
    max-width: 100%;
}

/* ------------------------------
   Compact desktop / tablet header
------------------------------ */
@media screen and (max-width: 1380px) {
    #logo {
        margin-left: 28px;
    }

    #gnb .gnb_wrap {
        margin-right: 28px;
    }

    .gnb_1da {
        padding-left: 28px;
        padding-right: 28px;
    }

    .gnb_1dli.gnb_al_li_plus .gnb_1da {
        padding-right: 24px;
    }
}

@media screen and (max-width: 1180px) {
    #logo {
        margin-left: 20px;
    }

    #logo img {
        max-width: 245px;
    }

    #gnb .gnb_wrap {
        margin-right: 20px;
    }

    .gnb_1da {
        padding-left: 18px;
        padding-right: 18px;
        font-size: 12.5pt;
    }
}

/* ------------------------------
   Tablet/mobile navigation
------------------------------ */
@media screen and (max-width: 1100px) {
    body {
        font-size: 14px;
    }

    .changam-topbar {
        display: none;
    }

    #hd {
        position: relative;
        z-index: 10000;
        border-bottom: 1px solid #ececec;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    .changam-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 72px;
        padding: 0 18px;
    }

    #logo {
        float: none;
        margin: 0;
        padding: 0;
        max-width: calc(100% - 72px);
    }

    #logo a,
    #logo img {
        display: block;
    }

    #logo img {
        width: auto;
        max-width: min(260px, 100%);
        max-height: 54px;
    }

    #gnb {
        position: static;
        float: none;
    }

    #gnb .gnb_wrap {
        position: static;
        margin: 0;
    }

    #gnb_1dul {
        display: none !important;
    }

    .submenu_bg {
        display: none !important;
    }

    .changam-menu-toggle {
        position: relative;
        z-index: 100003;
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: 48px;
        height: 48px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #222;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
    }

    .changam-menu-toggle:focus-visible,
    #gnb .gnb_close_btn:focus-visible,
    #gnb_all a:focus-visible {
        outline: 3px solid rgba(196, 0, 75, 0.35);
        outline-offset: 2px;
    }

    .changam-menu-toggle-icon {
        position: relative;
        display: block;
        width: 24px;
        height: 18px;
    }

    .changam-menu-toggle-icon span {
        position: absolute;
        left: 0;
        width: 24px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform 0.2s ease, top 0.2s ease, opacity 0.2s ease;
    }

    .changam-menu-toggle-icon span:nth-child(1) { top: 1px; }
    .changam-menu-toggle-icon span:nth-child(2) { top: 8px; }
    .changam-menu-toggle-icon span:nth-child(3) { top: 15px; }

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

    body.changam-menu-open .changam-menu-toggle {
        visibility: hidden;
    }

    body.changam-menu-open .changam-menu-toggle-icon span:nth-child(1) {
        top: 8px;
        transform: rotate(45deg);
    }

    body.changam-menu-open .changam-menu-toggle-icon span:nth-child(2) {
        opacity: 0;
    }

    body.changam-menu-open .changam-menu-toggle-icon span:nth-child(3) {
        top: 8px;
        transform: rotate(-45deg);
    }

    .changam-menu-dim {
        position: fixed;
        margin: 0;
        padding: 0;
        border: 0;
        inset: 0;
        z-index: 100000;
        display: block;
        background: rgba(0, 0, 0, 0.52);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    body.changam-menu-open .changam-menu-dim {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    #gnb_all {
        position: fixed !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 100002;
        display: block !important;
        width: min(88vw, 430px) !important;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        border: 0;
        background: #fff;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.2);
        transform: translateX(102%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.28s ease, visibility 0.28s ease;
        -webkit-overflow-scrolling: touch;
    }

    body.changam-menu-open #gnb_all {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    #gnb_all h2 {
        display: flex;
        align-items: center;
        height: 72px;
        margin: 0;
        padding: 0 72px 0 22px;
        border-bottom: 1px solid var(--changam-border);
        background: #fff;
        color: var(--changam-text);
        font-size: 20px;
        font-weight: 700;
    }

    #gnb .gnb_close_btn {
        position: absolute;
        top: 12px;
        right: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border: 0;
        border-radius: 10px;
        background: #f5f6f7;
        color: #333;
        font-size: 22px;
    }

    .changam-mobile-utility {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 16px 20px 8px;
        border-bottom: 1px solid var(--changam-border);
        background: #fafafa;
    }

    .changam-mobile-utility a {
        display: inline-flex;
        flex: 1 1 calc(50% - 4px);
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 8px 10px;
        border: 1px solid #dedede;
        border-radius: 7px;
        background: #fff;
        color: #444;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
    }

    .changam-mobile-utility a:hover,
    .changam-mobile-utility a:focus {
        border-color: rgba(196, 0, 75, 0.35);
        color: var(--changam-brand);
    }

    #gnb_all .gnb_al_ul {
        display: block;
        padding: 8px 20px 28px;
    }

    #gnb_all .gnb_al_li,
    #gnb_all .gnb_al_ul > li:nth-child(5n+1) {
        float: none;
        width: 100%;
        min-height: 0;
        padding: 0;
        border: 0;
        border-bottom: 1px solid var(--changam-border);
    }

    #gnb_all .gnb_al_li .gnb_al_a {
        display: block;
        margin: 0;
        padding: 18px 4px 12px;
        color: #222;
        font-size: 17px;
        font-weight: 700;
    }

    #gnb_all .gnb_al_li > ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 8px;
        padding: 0 0 16px;
    }

    #gnb_all .gnb_al_li li {
        line-height: 1.35;
    }

    #gnb_all .gnb_al_li li a {
        display: block;
        min-height: 42px;
        padding: 10px 12px;
        border-radius: 7px;
        background: #f6f7f8;
        color: #4a4a4a;
        font-size: 14px;
        word-break: keep-all;
    }

    #gnb_all .gnb_al_li li a:hover,
    #gnb_all .gnb_al_li li a:focus {
        background: #fff2f7;
        color: var(--changam-brand);
    }

    /* Sub-page shell */
    #container_wr {
        width: calc(100% - 32px) !important;
        margin-top: 28px !important;
    }

    #leftArea {
        float: none !important;
        width: 100% !important;
        margin: 0 0 24px !important;
		display:none !important;
    }

    #leftArea dl {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    #leftArea .subTitle {
        flex: 0 0 100%;
        padding: 0 0 15px;
        border-bottom-width: 2px;
        font-size: clamp(22px, 4vw, 28px);
    }

    #leftArea dd[style] {
        display: none;
    }

    #leftArea .active,
    #leftArea .notActive {
        flex: 1 1 180px;
        min-height: 48px;
        padding: 13px 15px;
        border: 1px solid #e3e3e3;
        border-radius: 8px;
        background-image: none;
        font-size: 15px;
        text-align: center;
    }

    #leftArea .active {
        border: 2px solid var(--changam-accent);
        background: #fff9e6;
        color: #111;
    }

    #container {
        position: relative;
        float: none !important;
        width: 100% !important;
        min-height: 0;
        margin: 0 0 40px !important;
        font-size: 1em;
    }

    #container_title {
        margin-bottom: 24px;
    }

    #container_title span.sub_title {
        font-size: clamp(24px, 4vw, 34px);
        line-height: 1.25;
        word-break: keep-all;
    }

    #wrapper img.sub-bg {
        width: 100% !important;
        height: clamp(150px, 24vw, 250px) !important;
        object-fit: cover;
    }

    /* Main blocks */
    #mainBg {
        height: clamp(420px, 58vw, 600px);
    }

    #mainBg .txt {
        position: absolute;
        right: 24px;
        bottom: 64px;
        left: 24px;
        z-index: 9;
        justify-content: center;
        margin: 0;
        text-align: center;
    }

    .main_visual {
        height: clamp(420px, 58vw, 600px);
    }

    .visual_text {
        right: 20px;
        bottom: 72px;
        left: 20px;
        transform: none;
        font-size: clamp(26px, 5vw, 36px);
        text-align: center;
    }

    .main_cards {
        position: relative;
        z-index: 3;
        margin-top: -64px;
    }

    .main_cards ul {
        flex-wrap: wrap;
        gap: 16px;
    }

    .main_cards li {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        height: auto;
        min-height: 170px;
        padding: 22px 18px;
    }

    .main_notice {
        margin-top: 42px;
        margin-bottom: 42px;
    }

    .quick_wrap,
    .stats,
    .btn-wrap {
        flex-wrap: wrap;
    }

    .quick_wrap {
        gap: 18px;
        padding: 0 18px;
    }

    .stats {
        gap: 24px 48px;
        padding: 52px 20px;
    }

    /* Custom content */
    .content {
        width: 100% !important;
        font-size: clamp(16px, 2.2vw, 20px);
        line-height: 1.7;
    }

    .ceo-image,
    .ceo-image2 {
        position: static;
        margin: 28px auto;
        text-align: center;
    }

    .ceo-image img,
    .ceo-image2 img {
        display: inline-block;
        max-height: 480px;
    }

    .history-wrap2 {
        gap: 28px;
    }

    .history-image {
        flex: 0 0 310px;
        width: 310px;
    }

    .circle-photo {
        width: 280px;
        height: 280px;
    }

    .status-table {
        width: 100% !important;
        margin-left: 0;
    }

    #iris_footer .iris_footer_inner {
        padding-top: 42px;
        padding-bottom: 42px;
    }

    #iris_footer .iris_footer_info {
        width: calc(100% - 280px);
    }
}

/* ------------------------------
   Phones
------------------------------ */
@media screen and (max-width: 768px) {
    :root {
        --changam-side-gap: 16px;
    }

    .pc-only {
        display: none !important;
    }

    .mobile-only {
        display: block !important;
    }

    .changam-header-inner {
        height: 66px;
        padding: 0 14px;
    }

    #logo img {
        max-width: min(220px, 100%);
        max-height: 48px;
    }

    .changam-menu-toggle {
        width: 44px;
        height: 44px;
    }

    #gnb_all {
        width: min(92vw, 390px) !important;
    }

    #gnb_all h2 {
        height: 66px;
        padding-left: 18px;
        font-size: 19px;
    }

    #gnb .gnb_close_btn {
        top: 10px;
        right: 10px;
        width: 46px;
        height: 46px;
    }

    #gnb_all .gnb_al_ul {
        padding-right: 16px;
        padding-left: 16px;
    }

    #container_wr {
        width: calc(100% - 28px) !important;
        margin-top: 22px !important;
    }

    #leftArea dl {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    #leftArea .subTitle {
        display: none;
    }

    #leftArea .active,
    #leftArea .notActive {
        flex: 0 0 auto;
        min-width: 128px;
        min-height: 44px;
        padding: 11px 14px;
        white-space: nowrap;
        scroll-snap-align: start;
    }

    #container_title {
        padding-bottom: 2px;
    }

    #container_title span.sub_title {
        font-size: clamp(23px, 7vw, 30px);
    }

    #wrapper img.sub-bg {
        height: clamp(120px, 30vw, 190px) !important;
    }

    #mainBg,
    .main_visual {
        height: clamp(350px, 78vw, 500px);
    }

    .controls span {
        font-size: 1.5em;
    }

    .controls .prev { left: 16px; }
    .controls .next { right: 16px; }

    .main_cards {
        margin-top: -46px;
    }

    .main_cards ul,
    .main_notice,
    #iris_footer .iris_footer_inner,
    #ft_wr,
    #ft_copy {
        width: calc(100% - 28px);
    }

    .main_cards li {
        min-height: 145px;
        padding: 18px 14px;
        font-size: 16px;
    }

    .main_notice {
        display: block;
        margin-top: 34px;
        margin-bottom: 34px;
    }

    .main_notice h2 {
        width: 100%;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-right: 0;
        border-bottom: 2px solid #ccc;
    }

    .main_notice ul {
        padding-left: 0;
    }

    .quick_menu {
        margin-top: 52px;
    }

    .quick_wrap {
        gap: 12px;
        margin-top: 24px;
    }

    .mid_banner {
        height: auto;
        min-height: 190px;
        padding: 36px 18px;
        font-size: 22px;
        text-align: center;
    }

    .stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 12px;
        padding: 40px 16px;
        font-size: 22px;
        text-align: center;
    }

    .title_guide h3 {
        margin-top: 30px;
        padding-bottom: 15px;
        font-size: clamp(25px, 7vw, 34px);
    }

    .app {
        position: static;
        margin-top: 12px;
    }

    .app li {
        margin: 0 5px 5px 0;
    }

    .bbs_search01 {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 14px;
    }

    .bbs_search01 select,
    .bbs_search01 input[type="text"],
    .bbs_search01 .input20f {
        flex: 1 1 150px;
        width: auto !important;
        min-width: 0;
        height: 42px;
    }

    .bbs_search01 button,
    .bbs_search01 input[type="submit"],
    .bbs_search01 .bbs_sbtn01,
    .bbs_search01 .bbs_sbtn03 {
        min-height: 42px;
    }

    .cnt-box {
        padding: 22px 18px;
    }

    .btn-wrap {
        gap: 12px;
    }

    .btn_new,
    .board_list .btn_st1,
    .board_list .btn_st2,
    .board_list .btn_st3 {
        width: min(100%, 267px);
        min-height: 50px;
        height: auto;
        padding: 12px 16px;
        font-size: 17px;
        line-height: 1.35;
    }

    .board_list .d_flex,
    .board_list.d_flex {
        display: block !important;
    }

    .board_list .img_box {
        width: 100%;
        height: auto;
        min-height: 210px;
        margin-bottom: 18px;
    }

    .board_list .right {
        float: none !important;
        width: 100%;
        height: auto;
    }

    .tabs,
    .tab_box {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .tab,
    .tab_box .tab_btn {
        flex: 0 0 auto;
        min-width: 150px;
        min-height: 50px;
        height: auto;
        padding: 12px;
        font-size: 15px;
    }

    .unit_cont,
    .program_cont {
        padding: 28px 4px;
    }

    .desc .pink,
    .desc .black,
    .desc .line2 {
        font-size: 17px;
    }

    .section-title {
        padding-left: 16px;
        font-size: 20px;
        line-height: 1.3;
    }

    .info-text,
    .info-text2,
    .asset-title,
    .status-title {
        margin-left: 0;
        padding-left: 0;
        font-size: 16px;
        line-height: 1.65;
    }

    .history-wrap,
    .history-wrap2 {
        display: block;
        padding-left: 0;
    }

    .history-section {
        margin-top: 46px;
    }

    .history-image {
        width: min(100%, 300px);
        margin: 0 auto 30px;
        padding-top: 0;
    }

    .circle-photo {
        width: min(78vw, 280px);
        height: min(78vw, 280px);
        margin: 0 auto;
    }

    .bg-shape,
    .dot1,
    .dot2 {
        display: none;
    }

    .history-list {
        padding: 0;
    }

    .history-row {
        display: grid;
        grid-template-columns: 58px 70px minmax(0, 1fr);
        gap: 4px;
        margin-bottom: 18px;
    }

    .year,
    .year2,
    .date,
    .date2,
    .history-text,
    .history-text2 {
        width: auto;
        font-size: 16px;
        line-height: 1.5;
        text-align: left;
    }

    .history-text.small {
        padding-left: 0;
        margin-top: 0;
    }

    .content p {
        margin-bottom: 22px;
    }

    .sign {
        margin-top: 42px;
        padding-right: 0;
    }

    .sign .label,
    .sign .name {
        font-size: 18px;
    }

    /* Tables: keep data readable without making the whole page wider. */
    .asset-table,
    .asset-table2,
    .asset-table3,
    .status-table,
    .board-table,
    .table_st1 {
        width: 100% !important;
        margin-left: 0 !important;
        table-layout: auto;
    }

    .asset-table th,
    .asset-table td,
    .asset-table2 th,
    .asset-table2 td,
    .asset-table3 th,
    .asset-table3 td,
    .status-table th,
    .status-table td,
    .board-table th,
    .board-table td,
    .table_st1 th,
    .table_st1 td {
        height: auto;
        padding: 9px 8px;
        font-size: 14px;
        line-height: 1.45;
        word-break: keep-all;
    }

    .asset-table .rowspan,
    .status-table .floor {
        width: auto;
        min-width: 64px;
    }

    #iris_footer .iris_footer_inner {
        min-height: 0;
        padding-top: 34px;
        padding-bottom: 34px;
    }

    #iris_footer .iris_footer_logo {
        width: min(230px, 80%);
    }

    #iris_footer .iris_footer_info {
        width: 100%;
        margin-top: 20px;
    }

    #iris_footer .iris_footer_address,
    #iris_footer .iris_footer_contact {
        font-size: 14px;
        line-height: 1.65;
        word-break: keep-all;
    }

    #iris_footer .iris_footer_copy {
        font-size: 12px;
    }

    #iris_footer .iris_footer_menu {
        position: static;
        margin-top: 24px;
        line-height: 2;
    }

    #iris_footer .iris_footer_menu span {
        margin: 0 8px;
    }

    #top_btn {
        right: 14px;
        bottom: 14px;
        width: 46px;
        height: 46px;
        font-size: 18px;
    }

    #ft_wr {
        display: block;
        padding: 28px 0;
    }

    #ft_wr .ft_cnt {
        float: none;
        width: 100%;
        padding: 0;
        margin-bottom: 24px;
    }

    #ft_copy {
        padding: 18px 0;
    }

    pre {
        max-width: 100%;
        overflow-x: auto;
    }

    .twopart_input,
    .form_01 .frm_label,
    #validation_check {
        width: 100% !important;
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .changam-header-inner {
        padding-right: 10px;
        padding-left: 12px;
    }

    #logo img {
        max-width: min(190px, 100%);
    }

    #gnb_all .gnb_al_li > ul {
        grid-template-columns: 1fr;
    }

    .main_cards ul {
        display: block;
    }

    .main_cards li {
        width: 100%;
        min-height: 132px;
        margin-bottom: 12px;
    }

    .stats {
        grid-template-columns: 1fr;
    }

    .history-row {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .history-row .date2,
    .history-row .date {
        grid-column: 1;
    }

    .history-row .history-text2,
    .history-row .history-text {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .btn-wrap {
        display: grid;
        grid-template-columns: 1fr;
    }

    .btn_new,
    .board_list .btn_st1,
    .board_list .btn_st2,
    .board_list .btn_st3 {
        width: 100%;
        max-width: none;
    }

    #iris_footer .iris_footer_menu a {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ======================================================================

/* ======================================================================
   v3 — 기관형 모바일 정렬 패치
   참고 방향: 제주대학교 연수원·아라컨벤션홀, K-하이테크, K-PONY
   목표
   1) 메인 비주얼은 모바일에서 지나치게 납작해지지 않도록 중앙 크롭
   2) NOTICE / QUICK MENU / FOOTER의 좌우 기준선을 동일하게 유지
   3) 퀵 메뉴 이미지는 같은 비율, 글 영역은 같은 높이로 정렬
   4) 320px부터 4K까지 가로 스크롤 없이 동작
   ====================================================================== */
:root {
    --changam-main-width: 1117px;
    --changam-header-width: 1280px;
    --changam-gutter: 20px;
    --changam-card-gap: 22px;
    --changam-section-space: 72px;
    --changam-card-radius: 12px;
    --changam-card-border: #e4e7eb;
    --changam-card-shadow: 0 8px 24px rgba(30, 36, 43, 0.08);
    --changam-soft-bg: #f6f7f8;
    --changam-gold: #d3a323;
}

body[data-page="index"] #wrapper,
body[data-page="index"] #container_wr,
body[data-page="index"] #container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
}

.changam-header-inner {
    width: 100%;
    max-width: var(--changam-header-width);

	margin-right: auto;
    margin-left: auto;
}

/* ----------------------------------------------------------------------
   Main visual — image-cover 방식처럼 YouTube 영상을 중앙 기준으로 크롭
   ---------------------------------------------------------------------- */
body[data-page="index"] #mainBg {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: clamp(470px, 32.71vw, 628px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #111;
    isolation: isolate;
}

body[data-page="index"] #mainBg #slider,
body[data-page="index"] #mainBg .slide,
body[data-page="index"] #mainBg .main_visual {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

body[data-page="index"] #mainBg iframe,
body[data-page="index"] #mainBg iframe[src*="youtube.com"],
body[data-page="index"] #mainBg iframe[src*="youtu.be"] {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    border: 0 !important;
    transform: translate(-50%, -50%) !important;
}

body[data-page="index"] #mainBg .txt {
    position: absolute;
    right: max(var(--changam-gutter), calc((100% - var(--changam-main-width)) / 2));
    bottom: clamp(36px, 5vw, 78px);
    left: max(var(--changam-gutter), calc((100% - var(--changam-main-width)) / 2));
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    margin: 0 !important;
    color: #fff;
    text-align: left;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

body[data-page="index"] #mainBg .txt h1,
body[data-page="index"] #mainBg .txt h2,
body[data-page="index"] #mainBg .txt h3,
body[data-page="index"] #mainBg .txt p {
    max-width: 780px;
    margin: 0;
    color: inherit;
    font-size: clamp(24px, 2.35vw, 42px);
    line-height: 1.3;
    word-break: keep-all;
}

/* ----------------------------------------------------------------------
   Notice — 제목, 게시물, 날짜가 한 기준선에 놓이도록 정렬
   ---------------------------------------------------------------------- */
body[data-page="index"] .main_notice {
    display: grid !important;
    grid-template-columns: 156px minmax(0, 1fr);
    align-items: start;
    column-gap: 34px;
    width: min(var(--changam-main-width), calc(100% - (var(--changam-gutter) * 2))) !important;
    max-width: var(--changam-main-width) !important;
    margin: 0 auto !important;
    padding: 58px 0 62px;
}

body[data-page="index"] .main_notice h2 {
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 4px 30px 4px 0 !important;
    border-right: 1px solid #d7d9dc !important;
    border-bottom: 0 !important;
    line-height: 1;
}

body[data-page="index"] .main_notice h2 img {
    display: block;
    width: 108px;
    max-width: 100%;
    height: auto;
}

body[data-page="index"] .main_notice > :not(h2),
body[data-page="index"] .main_notice ul,
body[data-page="index"] .main_notice .lt,
body[data-page="index"] .main_notice .latest {
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

body[data-page="index"] .main_notice ul {
    list-style: none;
}

body[data-page="index"] .main_notice li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 34px;
    margin: 0;
    padding: 5px 0;
    border-bottom: 1px solid transparent;
    color: #24272b;
    font-size: 15px;
    line-height: 1.55;
}

body[data-page="index"] .main_notice li a {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="index"] .main_notice li time,
body[data-page="index"] .main_notice li .date,
body[data-page="index"] .main_notice li > span:last-child {
    color: #7a7f85;
    font-size: 13px;
    white-space: nowrap;
}

/* ----------------------------------------------------------------------
   Quick menu — 기관 홈페이지식 이미지 + 고정 높이 텍스트 카드
   ---------------------------------------------------------------------- */
body[data-page="index"] .quick_menu {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 56px var(--changam-gutter) var(--changam-section-space) !important;
    background: var(--changam-soft-bg);
    text-align: center;
}

body[data-page="index"] .quick_menu > img,
body[data-page="index"] .quick_menu img[src*="tit_quickmenu"] {
    display: block;
    width: min(1112px, 100%) !important;
    max-width: 1112px !important;
    height: auto !important;
    margin: 0 auto !important;
}

body[data-page="index"] .quick_wrap {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    width: 100% !important;
    max-width: var(--changam-main-width) !important;
    margin: 38px auto 0 !important;
    padding: 0 !important;
    gap: var(--changam-card-gap) !important;
}

body[data-page="index"] .quick_wrap > ul {
    display: contents !important;
}

body[data-page="index"] .quick_wrap > a,
body[data-page="index"] .quick_wrap > div,
body[data-page="index"] .quick_wrap > li,
body[data-page="index"] .quick_wrap > ul > li {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    align-self: stretch;
    width: auto !important;
    min-width: 0;
    max-width: none !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 0 18px !important;
    overflow: hidden;
    border: 1px solid var(--changam-card-border);
    border-radius: var(--changam-card-radius);
    background: #fff;
    box-shadow: var(--changam-card-shadow);
    color: #222;
    text-decoration: none;
}

body[data-page="index"] .quick_wrap > a:hover,
body[data-page="index"] .quick_wrap > div:hover,
body[data-page="index"] .quick_wrap > li:hover,
body[data-page="index"] .quick_wrap > ul > li:hover {
    border-color: #d7c189;
    box-shadow: 0 12px 30px rgba(30, 36, 43, 0.12);
    transform: translateY(-2px);
}

body[data-page="index"] .quick_wrap > a,
body[data-page="index"] .quick_wrap > div,
body[data-page="index"] .quick_wrap > li,
body[data-page="index"] .quick_wrap > ul > li {
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

body[data-page="index"] .quick_wrap > a > img,
body[data-page="index"] .quick_wrap > div > img,
body[data-page="index"] .quick_wrap > li > img,
body[data-page="index"] .quick_wrap > ul > li > img,
body[data-page="index"] .quick_wrap > a > picture > img,
body[data-page="index"] .quick_wrap > div > picture > img,
body[data-page="index"] .quick_wrap > li > picture > img,
body[data-page="index"] .quick_wrap > ul > li > picture > img,
body[data-page="index"] .quick_wrap > div > a:first-child > img,
body[data-page="index"] .quick_wrap > li > a:first-child > img,
body[data-page="index"] .quick_wrap > ul > li > a:first-child > img {
    display: block !important;
    flex: 0 0 auto;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 0 16px !important;
    aspect-ratio: 261 / 178;
    object-fit: cover;
    object-position: center;
}

/* 카드 전체가 링크인 구조 */
body[data-page="index"] .quick_wrap > a > p,
body[data-page="index"] .quick_wrap > a > .txt,
body[data-page="index"] .quick_wrap > a > .text,
body[data-page="index"] .quick_wrap > a > .quick_txt,
body[data-page="index"] .quick_wrap > a > .quick_text {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    min-height: 102px;
    margin: 0 !important;
    padding: 0 15px !important;
    color: #555b61;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
    word-break: keep-all;
}

/* 이미지와 제목/설명이 형제인 구조 */
body[data-page="index"] .quick_wrap > div > p,
body[data-page="index"] .quick_wrap > li > p,
body[data-page="index"] .quick_wrap > ul > li > p {
    margin: 0 !important;
    padding: 0 15px;
    color: #555b61;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
    word-break: keep-all;
}

body[data-page="index"] .quick_wrap strong,
body[data-page="index"] .quick_wrap h3,
body[data-page="index"] .quick_wrap h4,
body[data-page="index"] .quick_wrap .title,
body[data-page="index"] .quick_wrap .tit,
body[data-page="index"] .quick_wrap .quick_title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0 0 7px !important;
    padding: 0 12px;
    color: #181a1d;
    font-size: clamp(16px, 1.3vw, 19px) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: center;
    word-break: keep-all;
}

/* 제목이 별도 링크로 출력되는 기존 마크업 대응 */
body[data-page="index"] .quick_wrap > div > a:not(:first-child),
body[data-page="index"] .quick_wrap > li > a:not(:first-child),
body[data-page="index"] .quick_wrap > ul > li > a:not(:first-child) {
    display: inline-block;
    margin: 0;
    padding: 0 3px;
    color: #181a1d;
    font-size: clamp(16px, 1.3vw, 19px);
    font-weight: 700;
    line-height: 1.45;
    text-decoration: none;
}

body[data-page="index"] .quick_wrap > div,
body[data-page="index"] .quick_wrap > li,
body[data-page="index"] .quick_wrap > ul > li {
    text-align: center;
}

/* ----------------------------------------------------------------------
   Footer — 본문과 같은 좌우선
   ---------------------------------------------------------------------- */
#iris_footer .iris_footer_inner {
    box-sizing: border-box;
    width: min(var(--changam-main-width), calc(100% - (var(--changam-gutter) * 2))) !important;
    max-width: var(--changam-main-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

#iris_footer .iris_footer_address,
#iris_footer .iris_footer_contact,
#iris_footer .iris_footer_copy {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

/* ----------------------------------------------------------------------
   Tablet
   ---------------------------------------------------------------------- */
@media screen and (max-width: 1100px) {
    :root {
        --changam-gutter: 24px;
        --changam-card-gap: 18px;
        --changam-section-space: 60px;
    }

    body[data-page="index"] #mainBg {
        height: clamp(390px, 49vw, 500px) !important;
    }

    body[data-page="index"] #mainBg iframe,
    body[data-page="index"] #mainBg iframe[src*="youtube.com"],
    body[data-page="index"] #mainBg iframe[src*="youtu.be"] {
        width: 100% !important;
        height: auto !important;
        min-width: 100% !important;
        min-height: 100% !important;
    }

    body[data-page="index"] .main_notice {
        grid-template-columns: 138px minmax(0, 1fr);
        column-gap: 26px;
        padding-top: 48px;
        padding-bottom: 52px;
    }

    body[data-page="index"] .main_notice h2 {
        padding-right: 24px !important;
    }

    body[data-page="index"] .quick_wrap {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px !important;
    }

    body[data-page="index"] .quick_wrap > a > p,
    body[data-page="index"] .quick_wrap > a > .txt,
    body[data-page="index"] .quick_wrap > a > .text,
    body[data-page="index"] .quick_wrap > a > .quick_txt,
    body[data-page="index"] .quick_wrap > a > .quick_text {
        min-height: 108px;
        padding-right: 12px !important;
        padding-left: 12px !important;
        font-size: 13.5px;
    }
}

/* ----------------------------------------------------------------------
   Mobile / narrow tablet
   ---------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    :root {
        --changam-gutter: 18px;
        --changam-card-gap: 14px;
        --changam-section-space: 50px;
    }

    body[data-page="index"] #mainBg {
        height: clamp(300px, 56vw, 430px) !important;
    }

    body[data-page="index"] #mainBg iframe,
    body[data-page="index"] #mainBg iframe[src*="youtube.com"],
    body[data-page="index"] #mainBg iframe[src*="youtu.be"] {
        width: auto !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        aspect-ratio: 16 / 9 !important;
    }

    body[data-page="index"] #mainBg .txt {
        right: var(--changam-gutter);
        bottom: 28px;
        left: var(--changam-gutter);
        justify-content: center;
        text-align: center;
    }

    body[data-page="index"] #mainBg .txt h1,
    body[data-page="index"] #mainBg .txt h2,
    body[data-page="index"] #mainBg .txt h3,
    body[data-page="index"] #mainBg .txt p {
        font-size: clamp(22px, 5vw, 34px);
    }

    body[data-page="index"] .main_notice {
        display: block !important;
        padding-top: 38px;
        padding-bottom: 42px;
    }

    body[data-page="index"] .main_notice h2 {
        width: 100% !important;
        margin-bottom: 14px !important;
        padding: 0 0 14px !important;
        border-right: 0 !important;
        border-bottom: 1px solid #d7d9dc !important;
    }

    body[data-page="index"] .main_notice li {
        min-height: 42px;
        padding: 9px 0;
        border-bottom-color: #edf0f2;
        font-size: 14px;
    }

    body[data-page="index"] .main_notice li time,
    body[data-page="index"] .main_notice li .date,
    body[data-page="index"] .main_notice li > span:last-child {
        font-size: 12px;
    }

    body[data-page="index"] .quick_menu {
        padding-top: 42px !important;
    }

    body[data-page="index"] .quick_menu > img,
    body[data-page="index"] .quick_menu img[src*="tit_quickmenu"] {
        display: none !important;
    }

    body[data-page="index"] .quick_menu::before {
        content: "QUICK MENU";
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: var(--changam-main-width);
        margin: 0 auto;
        color: var(--changam-gold);
        font-family: Arial, sans-serif;
        font-size: clamp(21px, 4.2vw, 27px);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: .01em;
        white-space: nowrap;
        background:
            linear-gradient(#b5aea1, #b5aea1) left center / calc(50% - 82px) 1px no-repeat,
            linear-gradient(#b5aea1, #b5aea1) right center / calc(50% - 82px) 1px no-repeat;
    }

    body[data-page="index"] .quick_wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        margin-top: 24px !important;
    }

    body[data-page="index"] .quick_wrap > a,
    body[data-page="index"] .quick_wrap > div,
    body[data-page="index"] .quick_wrap > li,
    body[data-page="index"] .quick_wrap > ul > li {
        padding-bottom: 16px !important;
        border-radius: 10px;
    }

    body[data-page="index"] .quick_wrap > a > img,
    body[data-page="index"] .quick_wrap > div > img,
    body[data-page="index"] .quick_wrap > li > img,
    body[data-page="index"] .quick_wrap > ul > li > img,
    body[data-page="index"] .quick_wrap > a > picture > img,
    body[data-page="index"] .quick_wrap > div > picture > img,
    body[data-page="index"] .quick_wrap > li > picture > img,
    body[data-page="index"] .quick_wrap > ul > li > picture > img,
    body[data-page="index"] .quick_wrap > div > a:first-child > img,
    body[data-page="index"] .quick_wrap > li > a:first-child > img,
    body[data-page="index"] .quick_wrap > ul > li > a:first-child > img {
        margin-bottom: 14px !important;
    }

    body[data-page="index"] .quick_wrap > a > p,
    body[data-page="index"] .quick_wrap > a > .txt,
    body[data-page="index"] .quick_wrap > a > .text,
    body[data-page="index"] .quick_wrap > a > .quick_txt,
    body[data-page="index"] .quick_wrap > a > .quick_text {
        min-height: 112px;
        padding-right: 12px !important;
        padding-left: 12px !important;
        font-size: clamp(13px, 1.8vw, 15px);
    }

    body[data-page="index"] .quick_wrap strong,
    body[data-page="index"] .quick_wrap h3,
    body[data-page="index"] .quick_wrap h4,
    body[data-page="index"] .quick_wrap .title,
    body[data-page="index"] .quick_wrap .tit,
    body[data-page="index"] .quick_wrap .quick_title,
    body[data-page="index"] .quick_wrap > div > a:not(:first-child),
    body[data-page="index"] .quick_wrap > li > a:not(:first-child),
    body[data-page="index"] .quick_wrap > ul > li > a:not(:first-child) {
        font-size: clamp(15px, 2.4vw, 18px) !important;
    }
}

/* ----------------------------------------------------------------------
   Phones
   ---------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
    :root {
        --changam-gutter: 15px;
        --changam-card-gap: 10px;
        --changam-section-space: 44px;
    }

    .changam-header-inner {
        height: 64px;
        padding-right: 12px;
        padding-left: 15px;
    }

    #logo {
        max-width: calc(100% - 58px);
    }

    #logo img {
        width: auto;
        max-width: min(205px, 100%);
        max-height: 46px;
    }

    .changam-menu-toggle {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }

    body[data-page="index"] #mainBg {
        height: clamp(280px, 78vw, 330px) !important;
    }

    body[data-page="index"] .main_notice {
        padding-top: 32px;
        padding-bottom: 36px;
    }

    body[data-page="index"] .main_notice h2 img {
        width: 104px;
    }

    body[data-page="index"] .main_notice li {
        gap: 9px;
        min-height: 40px;
        font-size: 13.5px;
    }

    body[data-page="index"] .main_notice li time,
    body[data-page="index"] .main_notice li .date,
    body[data-page="index"] .main_notice li > span:last-child {
        font-size: 11.5px;
    }

    body[data-page="index"] .quick_menu {
        padding-top: 36px !important;
    }

    body[data-page="index"] .quick_menu::before {
        font-size: clamp(19px, 6vw, 23px);
        background:
            linear-gradient(#b5aea1, #b5aea1) left center / calc(50% - 69px) 1px no-repeat,
            linear-gradient(#b5aea1, #b5aea1) right center / calc(50% - 69px) 1px no-repeat;
    }

    body[data-page="index"] .quick_wrap {
        margin-top: 20px !important;
    }

    body[data-page="index"] .quick_wrap > a,
    body[data-page="index"] .quick_wrap > div,
    body[data-page="index"] .quick_wrap > li,
    body[data-page="index"] .quick_wrap > ul > li {
        padding-bottom: 13px !important;
        border-radius: 8px;
        box-shadow: 0 5px 16px rgba(30, 36, 43, 0.08);
    }

    body[data-page="index"] .quick_wrap > a > img,
    body[data-page="index"] .quick_wrap > div > img,
    body[data-page="index"] .quick_wrap > li > img,
    body[data-page="index"] .quick_wrap > ul > li > img,
    body[data-page="index"] .quick_wrap > a > picture > img,
    body[data-page="index"] .quick_wrap > div > picture > img,
    body[data-page="index"] .quick_wrap > li > picture > img,
    body[data-page="index"] .quick_wrap > ul > li > picture > img,
    body[data-page="index"] .quick_wrap > div > a:first-child > img,
    body[data-page="index"] .quick_wrap > li > a:first-child > img,
    body[data-page="index"] .quick_wrap > ul > li > a:first-child > img {
        margin-bottom: 11px !important;
    }

    body[data-page="index"] .quick_wrap > a > p,
    body[data-page="index"] .quick_wrap > a > .txt,
    body[data-page="index"] .quick_wrap > a > .text,
    body[data-page="index"] .quick_wrap > a > .quick_txt,
    body[data-page="index"] .quick_wrap > a > .quick_text {
        min-height: 112px;
        padding-right: 9px !important;
        padding-left: 9px !important;
        font-size: clamp(12.5px, 3.5vw, 14px);
        line-height: 1.48;
    }

    body[data-page="index"] .quick_wrap > div > p,
    body[data-page="index"] .quick_wrap > li > p,
    body[data-page="index"] .quick_wrap > ul > li > p {
        padding-right: 9px;
        padding-left: 9px;
        font-size: clamp(12.5px, 3.5vw, 14px);
        line-height: 1.48;
    }

    body[data-page="index"] .quick_wrap strong,
    body[data-page="index"] .quick_wrap h3,
    body[data-page="index"] .quick_wrap h4,
    body[data-page="index"] .quick_wrap .title,
    body[data-page="index"] .quick_wrap .tit,
    body[data-page="index"] .quick_wrap .quick_title,
    body[data-page="index"] .quick_wrap > div > a:not(:first-child),
    body[data-page="index"] .quick_wrap > li > a:not(:first-child),
    body[data-page="index"] .quick_wrap > ul > li > a:not(:first-child) {
        min-height: 40px;
        margin-bottom: 5px !important;
        padding-right: 7px;
        padding-left: 7px;
        font-size: clamp(14px, 4vw, 16px) !important;
        line-height: 1.35 !important;
    }

    #iris_footer .iris_footer_inner {
        width: calc(100% - (var(--changam-gutter) * 2)) !important;
        padding-top: 32px;
        padding-bottom: 34px;
        text-align: left;
    }

    #iris_footer .iris_footer_logo {
        width: min(215px, 76%);
    }

    #iris_footer .iris_footer_info {
        margin-top: 18px;
    }

    #iris_footer .iris_footer_address,
    #iris_footer .iris_footer_contact {
        font-size: 13px;
        line-height: 1.7;
    }

    #iris_footer .iris_footer_menu {
        margin-top: 20px;
    }
}

@media screen and (max-width: 359px) {
    :root {
        --changam-gutter: 12px;
        --changam-card-gap: 8px;
    }

    body[data-page="index"] #mainBg {
        height: 280px !important;
    }

    body[data-page="index"] .quick_wrap > a > p,
    body[data-page="index"] .quick_wrap > a > .txt,
    body[data-page="index"] .quick_wrap > a > .text,
    body[data-page="index"] .quick_wrap > a > .quick_txt,
    body[data-page="index"] .quick_wrap > a > .quick_text {
        min-height: 118px;
        padding-right: 7px !important;
        padding-left: 7px !important;
        font-size: 12px;
    }

    body[data-page="index"] .quick_wrap strong,
    body[data-page="index"] .quick_wrap h3,
    body[data-page="index"] .quick_wrap h4,
    body[data-page="index"] .quick_wrap .title,
    body[data-page="index"] .quick_wrap .tit,
    body[data-page="index"] .quick_wrap .quick_title,
    body[data-page="index"] .quick_wrap > div > a:not(:first-child),
    body[data-page="index"] .quick_wrap > li > a:not(:first-child),
    body[data-page="index"] .quick_wrap > ul > li > a:not(:first-child) {
        font-size: 13px !important;
    }
}

/* ======================================================================
   Main page mobile size correction
   - Preserve the existing desktop design and markup.
   - Correct only fixed widths, spacing, type sizes and image proportions.
   ====================================================================== */
@media screen and (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: visible;
    }

    body[data-page="index"] #hd,
    body[data-page="index"] #wrapper,
    body[data-page="index"] #container_wr,
    body[data-page="index"] #container,
    body[data-page="index"] #ft {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Keep the mobile menu button aligned with the right edge. */
    .changam-header-inner {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        padding-right: 0 !important;
    }

    .changam-menu-toggle {
        margin-right: 0 !important;
        margin-left: auto !important;
    }

    /* Main video: fill the mobile banner like the PC view and clip YouTube letterboxing. */
    body[data-page="index"] #mainBg {
        width: 100% !important;
        height: 56.25vw !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: 432px !important;
    }

    body[data-page="index"] #video-container {
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    body[data-page="index"] #video-container iframe {
        width: 134% !important;
        height: 134% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* NOTICE: place the heading above the board without a divider. */
    body[data-page="index"] .main_notice_wrap {
        box-sizing: border-box;
        display: block;
        width: calc(100% - 30px) !important;
        height: auto !important;
        min-height: 0;
        margin: 32px auto 0 !important;
        overflow: visible;
    }

    body[data-page="index"] .main_notice_title {
        box-sizing: border-box;
        display: block;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    body[data-page="index"] .main_notice_title img {
        display: block;
        width: 76px;
        max-width: 100%;
        height: auto !important;
    }

    body[data-page="index"] .main_notice_list {
        box-sizing: border-box;
        float: none !important;
        width: 100% !important;
        min-width: 0;
        padding-left: 0 !important;
    }

    body[data-page="index"] .main_notice_list li {
        display: flex;
        align-items: center;
        width: 100%;
        height: 30px;
        min-height: 0;
        line-height: 30px;
    }

    body[data-page="index"] .main_notice_list li a {
        flex: 1 1 auto;
        float: none !important;
        width: auto !important;
        min-width: 0;
        font-size: 13px;
        text-align: left !important;
    }

    body[data-page="index"] .main_notice_list li span {
        flex: 0 0 72px;
        float: none !important;
        width: 72px !important;
        font-size: 11px;
    }

    /* Scale the existing title artwork to the viewport. */
    body[data-page="index"] img[src*="tit_quickmenu.png"] {
        display: block;
        width: calc(100% - 30px) !important;
        max-width: 1112px !important;
        height: auto !important;
        margin: 0 auto;
    }

    /* QUICK MENU: same cards and order, two columns sized to the phone. */
    body[data-page="index"] .quick_menu_section {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        padding: 26px 15px 0 !important;
    }

    body[data-page="index"] .quick_menu_section ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 12px;
        width: 100%;
    }

    body[data-page="index"] .quick_menu_section ul li {
        width: auto !important;
        min-width: 0;
    }

    body[data-page="index"] .quick_menu_section ul li img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    body[data-page="index"] .quick_menu_section .quick_title {
        margin-top: 13px;
        padding: 0 3px;
        font-size: clamp(15px, 4vw, 18px);
        line-height: 1.3;
        word-break: keep-all;
    }

    body[data-page="index"] .quick_menu_section .quick_desc {
        margin-top: 8px;
        padding: 0 3px;
        font-size: clamp(12px, 3.2vw, 14px);
        line-height: 1.5;
    }

    /* Lower image banners: remove desktop minimum widths and scale as-is. */
    body[data-page="index"] #main_banner_zone2,
    body[data-page="index"] #main_banner_zone2 .main_banner,
    body[data-page="index"] .main_center2_wrap {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        aspect-ratio: 1700 / 563;
    }

    body[data-page="index"] .main_center2_wrap {
        background-position: center center;
        background-size: cover;
    }

    body[data-page="index"] #main_banner_zone3,
    body[data-page="index"] #main_banner_zone3 .main_banner {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
    }

    body[data-page="index"] #main_banner_zone3 .main_banner > img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
}

@media screen and (max-width: 480px) {
    body[data-page="index"] .main_notice_wrap {
        width: calc(100% - 24px) !important;
    }

    body[data-page="index"] .main_notice_title {
        width: 100% !important;
        padding-right: 0 !important;
    }

    body[data-page="index"] .main_notice_title img {
        width: 69px;
    }

    body[data-page="index"] .main_notice_list {
        padding-left: 0 !important;
    }

    body[data-page="index"] .main_notice_list li a {
        font-size: 12px;
    }

    body[data-page="index"] .main_notice_list li span {
        flex-basis: 64px;
        width: 64px !important;
        font-size: 10px;
    }
}

/* ======================================================================
   2026-08-19 final responsive integration
   - Keep the collaborator-owned greeting, footer and gallery rules intact.
   - Stabilize the desktop-to-tablet boundary without hiding overflow.
   ====================================================================== */

/* Fixed-width main blocks must remain inside the viewport at every width. */
body[data-page="index"] .main_notice_wrap,
body[data-page="index"] .quick_menu_section {
    box-sizing: border-box;
    width: min(100% - 40px, 1150px) !important;
    max-width: 100% !important;
}

body[data-page="index"] .main_notice_wrap {
    width: min(100% - 40px, 1117px) !important;
}

body[data-page="index"] .quick_menu_section ul {
    gap: clamp(14px, 2vw, 40px);
}

body[data-page="index"] .quick_menu_section ul li {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

body[data-page="index"] #main_banner_zone2 .main_banner,
body[data-page="index"] #main_banner_zone3 .main_banner {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

body[data-page="index"] #main_banner_zone3 .main_banner > img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Desktop menu and submenu share one fluid six-column alignment system. */
@media screen and (min-width: 1101px) {
    .changam-header-inner,
    #submenu {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
        column-gap: clamp(16px, 2vw, 30px);
        width: min(1300px, calc(100% - 40px)) !important;
        max-width: 1300px;
        margin-right: auto;
        margin-left: auto;
    }

    .changam-header-inner {
        align-items: center;
    }

    #logo {
        float: none !important;
        min-width: 0;
        margin: 0 !important;
    }

    #logo img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
    }

    #gnb,
    #gnb .gnb_wrap {
        float: none !important;
        width: 100%;
        min-width: 0;
        margin: 0 !important;
    }

    #gnb #gnb_1dul {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        float: none !important;
        width: 100%;
        margin: 0 !important;
    }

    #gnb .gnb_1dli {
        float: none;
        min-width: 0;
        text-align: center;
    }

    #gnb .gnb_1da,
    #gnb .gnb_1dli.gnb_al_li_plus .gnb_1da {
        padding-right: 6px !important;
        padding-left: 6px !important;
        font-size: clamp(14px, 1.12vw, 18px);
        white-space: nowrap;
    }

    .submenu-logo-space,
    .submenu-list-space {
        float: none;
        width: auto;
        min-width: 0;
    }

    .submenu-list-space {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    #submenu ul.submenu,
    #submenu ul.submenu_0,
    #submenu ul.submenu_1,
    #submenu ul.submenu_2,
    #submenu ul.submenu_3,
    #submenu ul.submenu_4,
    #submenu ul.submenu_5 {
        box-sizing: border-box;
        float: none;
        width: auto !important;
        min-width: 0;
        padding-right: 4px;
        padding-left: 4px;
    }

    #submenu ul.submenu li {
        padding-left: 0;
        text-align: center;
    }

    #submenu ul.submenu li a {
        display: block;
        margin-left: 0;
        font-size: clamp(14px, 1.06vw, 17px);
        text-indent: 0;
        white-space: nowrap;
    }
}

/* Prevent the legacy 282px + 940px floats from dropping at 1200-1300px. */
@media screen and (min-width: 1101px) and (max-width: 1320px) {
    body[data-page="sub"] #container_wr {
        display: grid;
        grid-template-columns: 282px minmax(0, 940px);
        align-items: start;
        column-gap: clamp(24px, 3vw, 44px);
    }

    body[data-page="sub"] #leftArea,
    body[data-page="sub"] #container {
        box-sizing: border-box;
        float: none !important;
        width: 100% !important;
        min-width: 0;
    }

    body[data-page="sub"] #container > *,
    body[data-page="sub"] #container [style*="width:"] {
        box-sizing: border-box;
        max-width: 100% !important;
    }

    body[data-page="sub"] #container img {
        max-width: 100% !important;
        height: auto;
    }
}

/* Responsive navigation, notice, media and main blocks. */
@media screen and (max-width: 1100px) {
    .changam-header-inner {
        box-sizing: border-box;
        width: 100% !important;
        max-width: none !important;
        padding-right: 0 !important;
    }

    .changam-menu-toggle {
        flex: 0 0 auto;
        margin-right: 0 !important;
        margin-left: auto !important;
    }

    #gnb {
        flex: 0 0 0;
        width: 0;
        min-width: 0;
    }

    body[data-page="index"] .main_notice_wrap {
        display: block;
        width: calc(100% - 40px) !important;
        height: auto !important;
        min-height: 0;
        margin: 38px auto 0 !important;
        overflow: visible;
    }

    body[data-page="index"] .main_notice_title {
        box-sizing: border-box;
        display: block;
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 14px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    body[data-page="index"] .main_notice_title img {
        display: block;
        width: 84px;
        max-width: 100%;
        height: auto !important;
    }

    body[data-page="index"] .main_notice_list {
        box-sizing: border-box;
        float: none !important;
        width: 100% !important;
        min-width: 0;
        padding-left: 0 !important;
    }

    body[data-page="index"] .main_notice_list li {
        display: flex;
        align-items: center;
        width: 100%;
        min-width: 0;
        border: 0 !important;
    }

    body[data-page="index"] .main_notice_list li a {
        flex: 1 1 auto;
        float: none !important;
        width: auto !important;
        min-width: 0;
        text-align: left !important;
    }

    body[data-page="index"] .main_notice_list li span {
        flex: 0 0 92px;
        float: none !important;
        width: 92px !important;
        text-align: right;
    }

    body[data-page="index"] .quick_menu_section {
        width: 100% !important;
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    body[data-page="index"] .quick_menu_section ul {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 16px;
        width: 100%;
    }

    body[data-page="index"] .quick_menu_section ul li {
        width: auto !important;
        min-width: 0;
    }

    body[data-page="index"] .quick_menu_section ul li img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    body[data-page="index"] #main_banner_zone2,
    body[data-page="index"] #main_banner_zone2 .main_banner,
    body[data-page="index"] .main_center2_wrap {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        aspect-ratio: 1700 / 563;
    }

    body[data-page="index"] .main_center2_wrap {
        background-position: center center;
        background-size: cover;
    }

    body[data-page="sub"] #container > *,
    body[data-page="sub"] #container [style*="width:"] {
        box-sizing: border-box;
        max-width: 100% !important;
    }

    body[data-page="sub"] #container img {
        max-width: 100% !important;
        height: auto;
    }
}

/* ======================================================================
   2026-08-19 representative final QA
   - Keep every main visual inside the viewport while it shrinks.
   - Keep year and month/day together; only the description may wrap.
   - Give board lists one inner horizontal scrollbar at under 600px.
   ====================================================================== */

/* The second main visual used a fixed 563px height, so background-size:cover
   cropped both sides between desktop and mobile widths. Preserve its source
   ratio until the viewport is wide enough to show the original 1700px art. */
@media screen and (max-width: 1700px) {
    body[data-page="index"] #main_banner_zone2,
    body[data-page="index"] #main_banner_zone2 .main_banner,
    body[data-page="index"] #main_banner_zone2 .main_center2_wrap {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        aspect-ratio: 1700 / 563;
    }

    body[data-page="index"] #main_banner_zone2 .main_center2_wrap {
        background-position: center top;
        background-size: 100% auto;
    }
}

/* The last main image must scale as one complete image instead of retaining
   the legacy 1000px canvas and losing either edge. */
body[data-page="index"] #main_banner_zone3,
body[data-page="index"] #main_banner_zone3 .main_banner {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
}

body[data-page="index"] #main_banner_zone3 .main_banner > img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

@media screen and (max-width: 1100px) {
    /* The date column previously wrapped inside 92px while its parent hid
       overflow, which made the right side look cut off around 1000-1100px. */
    body[data-page="index"] .main_notice_list li span {
        flex: 0 0 110px;
        width: 110px !important;
        min-width: 110px;
        height: 35px;
        overflow: visible;
        font-size: 15px;
        line-height: 35px;
        white-space: nowrap;
    }

    /* Both history pages share the same row classes. Year and month/day stay
       on one line; the description owns the only wrapping column. */
    body[data-page="sub"] .sub-content .history-row {
        display: grid !important;
        grid-template-columns: max-content max-content minmax(0, 1fr) !important;
        grid-auto-flow: row;
        align-items: start;
        column-gap: 8px;
        row-gap: 0;
    }

    body[data-page="sub"] .sub-content .history-row .year,
    body[data-page="sub"] .sub-content .history-row .year2,
    body[data-page="sub"] .sub-content .history-row .date,
    body[data-page="sub"] .sub-content .history-row .date2 {
        grid-column: auto !important;
        grid-row: 1 !important;
        width: auto !important;
        min-width: 0;
        white-space: nowrap;
    }

    body[data-page="sub"] .sub-content .history-row .history-text,
    body[data-page="sub"] .sub-content .history-row .history-text2 {
        grid-column: 3 !important;
        grid-row: 1 !important;
        min-width: 0;
        overflow-wrap: break-word;
        word-break: keep-all;
    }

    /* Match the reference notice board: the page itself never overflows,
       while the list keeps a readable 600px table with one inner scrollbar. */
    body[data-page="sub"] #bo_list .table-scroll-x,
    body[data-page="sub"] #bo_list .tbl_head01.tbl_wrap {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    body[data-page="sub"] #bo_list .table-scroll-x > table,
    body[data-page="sub"] #bo_list .tbl_head01.tbl_wrap > table,
    body[data-page="sub"] #bo_list table.board-table {
        display: table !important;
        width: 600px !important;
        min-width: 600px !important;
        max-width: none !important;
        table-layout: auto !important;
    }
}

@media screen and (max-width: 480px) {
    body[data-page="index"] .main_notice_list li span {
        flex-basis: 74px;
        width: 74px !important;
        min-width: 74px;
        font-size: 10px;
    }

    body[data-page="sub"] .sub-content .history-row {
        column-gap: 6px;
    }
}