@charset "utf-8";

/* 영역 */
/* @media screen and (max-width: 1480px) {}
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 980px) {}
@media screen and (max-width: 680px) {}
@media screen and (max-width: 480px) {}
*/

/* ====== home 영역 ====== */
@media screen and (max-width: 980px) {
    .hero-section {
        --hero-values-bg-height: 103px;
    }
    .header-wave {
        top: 64px;
        height: 39px;
    }
    .header-wave path {
        fill: #fffef8;
    }
    header,
    header.scrolled {
        height: 82px;
        background: #fffef8;
        border: 0;
    }
    header::after {
        bottom: -12px;
        height: 24px;
    }
    .mb-btn {
        top: 29px;
        right: 28px;
        width: 31px;
        height: 25px;
    }
    main {
        margin-top: 0;
    }
    .hero-section.section {
        height: var(--app-height);
        min-height: 650px;
    }
    .hero-sky-area {
        padding-top: 82px;
    }
    .hero-text-wrap {
        width: 100%;
        min-width: 0;
        transform: translateY(28px);
    }
    .hero-typo-stage {
        width: 100%;
        min-width: 0;
        padding: 28px 10px 0;
        transform: none;
    }
    .hero-compass {
        top: 50%;
        width: min(430px, 85vw);
    }
    .hero-outline-track {
        top: 16%;
        font-size: clamp(5.8rem, 13vw, 10rem);
        -webkit-text-stroke-color: rgba(28, 43, 32, 0.07);
    }
    .hero-job {
        margin-bottom: 23px;
        font-size: 1.1rem;
        letter-spacing: .48em;
    }
    .hero-main-title {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 0 auto 67px;
        font-size: clamp(4rem, 10.8vw, 6.8rem);
        line-height: .9;
        letter-spacing: -.06em;
    }
    .hero-main-title::before,
    .hero-main-title::after {
        content: none;
    }
    .hero-main-title span {
        display: inline-block;
    }
    .hero-main-title .space {
        display: inline-block;
        width: .2em;
        height: auto;
    }
    .hero-copy-block {
        gap: 2px;
        font-size: 1.42rem;
        line-height: 1.65;
    }
    .hero-role-new {
        margin-top: 20px;
        font-size: .96rem;
        letter-spacing: .25em;
    }
    .hero-cloud-left {
        left: -63px;
        top: 215px;
        transform: scale(.7);
    }
    .hero-cloud-right {
        right: -50px;
        top: 130px;
        transform: scale(.72);
    }
    .hero-birds-left {
        left: 17%;
        top: 19%;
    }
    .hero-birds-right {
        right: 8%;
        top: 17%;
    }
    .boat-wrapper {
        left: 78%;
        bottom: 44px;
    }
    .waves {
        height: 11vh;
        min-height: 88px;
    }
    .hero-values {
        width: 100vw;
        left: 50%;
        flex-basis: 103px;
        margin-top: -12px;
        border-radius: 0;
        transform: translateX(-50%);
    }
    .hero-values-inner {
        gap: 0;
        justify-content: space-around;
        padding: 19px 8px 8px;
    }
    .hero-value {
        min-width: 0;
        width: 25%;
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
    .hero-value-icon {
        width: 30px;
        height: 30px;
        font-size: 2.7rem;
    }
    .hero-value-wave {
        font-size: 3.1rem;
    }
    .hero-value strong {
        font-size: 1.15rem;
    }
    .hero-value small {
        font-size: 1rem;
        letter-spacing: -.04em;
    }
}

@media screen and (max-width: 480px) {
    .hero-section {
        --hero-values-bg-height: 94px;
    }
    .header-wave {
        top: 58px;
        height: 31px;
    }
    header {
        height: 72px;
    }
    header .container {
        padding: 0 19px;
    }
    .mb-btn {
        top: 24px;
        right: 25px;
        width: 30px;
    }
    .hero-sky-area {
        padding-top: 72px;
    }
    .hero-text-wrap {
        transform: translateY(18px);
    }
    .hero-typo-stage {
        padding-top: 20px;
    }
    .hero-compass {
        top: 47%;
        width: min(360px, 93vw);
    }
    .hero-outline-track {
        top: 18%;
        opacity: 0.45;
    }
    .hero-job {
        margin-bottom: 21px;
        font-size: 1rem;
    }
    .hero-main-title {
        margin-bottom: 62px;
        font-size: clamp(3.2rem, 9.2vw, 4rem);
        letter-spacing: -.07em;
    }
    .hero-copy-block {
        font-size: 1.3rem;
    }
    .hero-role-new {
        margin-top: 17px;
        font-size: .88rem;
        letter-spacing: .22em;
    }
    .boat-wrapper {
        left: 77%;
        bottom: 38px;
    }
    .boat-svg {
        width: 78px;
    }
    .hero-values {
        flex-basis: 94px;
    }
    .hero-values-inner {
        padding-left: 3px;
        padding-right: 3px;
    }
    .hero-value strong {
        font-size: .9rem;
        letter-spacing: -.03em;
    }
    .hero-value small {
        font-size: .78rem;
    }
}

/* ====== mobile-menu 영역 ====== */
@media screen and (max-width: 980px) {
    .mb-nav {
        right: 0;
        width: 100%;
        height: 100vh;
        height: var(--app-height);
        padding: 0 24px;
        align-items: center;
        overflow-x: hidden;
        overflow-y: auto;
        background: url("../images/mobile-menu-sea-bg.png") center bottom / 100% 100% no-repeat;
        background-color: #fdf5df;
        box-shadow: none;
    }

    .mb-nav::before,
    .mb-nav::after {
        content: none;
    }

    .mb-voyage-header {
        position: relative;
        z-index: 5;
        flex: 0 0 auto;
        margin-top: clamp(66px, 8vh, 92px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        text-align: center;
        opacity: 0;
        transform: translateY(16px);
    }

    .mb-nav.active .mb-voyage-header {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.5s ease 0.12s, transform 0.65s cubic-bezier(.22,1,.36,1) 0.12s;
    }

    .mb-sun-mark {
        position: relative;
        flex: 0 0 72px;
        width: 72px;
        height: 72px;
        margin-bottom: 14px;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .mb-sun-mark::before {
        content: none;
    }

    .mb-sun-svg {
        width: 72px;
        height: 72px;
        filter: drop-shadow(0 0 12px rgba(245,200,66,0.5));
        animation: mbSunPulse 3.2s ease-in-out infinite;
    }

    @keyframes mbSunPulse {
        0%, 100% { filter: drop-shadow(0 0 12px rgba(245,200,66,0.5)); }
        50%       { filter: drop-shadow(0 0 22px rgba(245,200,66,0.8)); }
    }

    .mb-voyage-title {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .mb-voyage-title::before,
    .mb-voyage-title::after {
        content: none;
    }

    .mb-voyage-title small {
        display: block;
        margin-bottom: 8px;
        color: #6b9baa;
        font-size: clamp(.78rem, 1.1vh, .88rem);
        font-weight: 700;
        letter-spacing: .38em;
    }

    .mb-voyage-title strong {
        display: block;
        color: #153e58;
        font-family: var(--font-point);
        font-size: clamp(2.4rem, 4.2vh, 3.2rem);
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -0.04em;
        margin-bottom: 8px;
    }

    .mb-voyage-title p {
        display: block;
        margin: 0 0 12px;
        color: #4e7b8b;
        font-size: clamp(1.05rem, 1.5vh, 1.2rem);
        font-weight: 500;
        line-height: 1.5;
    }

    .mb-title-wave {
        display: block;
        margin-top: 2px;
        opacity: 0.8;
    }

    .mb-voyage-script,
    .mb-title-flourish,
    .mb-menu-brand,
    .mb-menu-compass,
    .mb-light-particles,
    .mb-sea-waves,
    .mb-route-tail {
        display: none;
    }

    .mb-nav .mb-menu {
        position: relative;
        z-index: 5;
        flex: 0 0 auto;
        align-self: center;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: clamp(8px, 1.2vh, 12px);
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .mb-nav .mb-menu::before {
        content: none;
    }

    .mb-nav .mb-menu li {
        width: 100%;
        margin: 0;
        opacity: 0;
        transform: translateY(22px);
    }

    .mb-nav.active .mb-menu li {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.42s ease, transform 0.55s cubic-bezier(.22,1,.36,1);
    }

    .mb-nav.active .mb-menu li:nth-child(1) { transition-delay: .28s; }
    .mb-nav.active .mb-menu li:nth-child(2) { transition-delay: .38s; }
    .mb-nav.active .mb-menu li:nth-child(3) { transition-delay: .48s; }
    .mb-nav.active .mb-menu li:nth-child(4) { transition-delay: .58s; }
    .mb-nav.active .mb-menu li:nth-child(5) { transition-delay: .68s; }

    .mb-nav .mb-menu li a,
    .mb-nav .mb-menu li:hover a,
    .mb-nav .mb-menu li.active a,
    .mb-nav .mb-menu li.active:hover a {
        display: flex;
        align-items: center;
        gap: 0;
        min-height: clamp(58px, 7.2vh, 68px);
        padding: 0 14px 0 6px;
        border: 1px solid rgba(160,208,220,.35);
        border-radius: 50px;
        background: rgba(255,255,255,.64);
        box-shadow: 0 6px 20px rgba(38,111,130,.09), inset 0 1px 0 rgba(255,255,255,.80);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        color: #174664;
        text-decoration: none;
        text-shadow: none;
        letter-spacing: 0;
        transition: background .22s ease, box-shadow .22s ease, transform .18s ease;
    }

    .mb-nav .mb-menu li a::before,
    .mb-nav .mb-menu li a::after {
        content: none;
    }

    .mb-nav .mb-menu li:hover a {
        background: rgba(255,255,255,.82);
        box-shadow: 0 8px 26px rgba(38,111,130,.14), inset 0 1px 0 rgba(255,255,255,.90);
        transform: translateY(-1px);
    }

    .mb-nav .mb-menu li.active a,
    .mb-nav .mb-menu li.active:hover a {
        border-color: rgba(239,190,63,.38);
        background: rgba(255,253,238,.88);
        box-shadow: 0 8px 24px rgba(200,149,34,.14), inset 0 1px 0 rgba(255,255,255,.90);
    }

    .mb-route-icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        margin: 0 10px 0 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #f0ece0;
        border: 1px solid rgba(180,160,110,.22);
        color: #4a7a8a;
        flex-shrink: 0;
        font-size: 0;
    }

    .mb-route-icon svg {
        width: 20px;
        height: 20px;
        display: block;
    }

    .mb-nav .mb-menu li.active .mb-route-icon {
        background: #fef3d0;
        color: #c98a00;
        border-color: rgba(239,184,63,.35);
        box-shadow: none;
    }

    .mb-route-num {
        flex: 0 0 28px;
        width: auto;
        height: auto;
        display: block;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: #7aa8b8;
        font-family: var(--font-main);
        font-size: clamp(1.05rem, 1.5vh, 1.2rem);
        font-style: normal;
        font-weight: 600;
        letter-spacing: .04em;
        text-align: center;
    }

    .mb-nav .mb-menu li.active .mb-route-num {
        color: #c98a00;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .mb-route-name {
        flex: 1;
        padding: 0 6px;
        color: #1a3e57;
        font-size: clamp(1.4rem, 2.1vh, 1.72rem);
        font-weight: 700;
        letter-spacing: .06em;
        white-space: nowrap;
        position: static;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mb-route-name::after {
        content: '';
        display: block;
        flex: 0 1 50px;
    }

    .mb-nav .mb-menu li.active .mb-route-name {
        color: #153a55;
        font-weight: 700;
        text-shadow: none;
    }

    .mb-route-arrow {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(120,180,200,.18);
        color: #4e8498;
        font-size: 1.5rem;
        line-height: 1;
        flex-shrink: 0;
        opacity: 1;
        transform: none;
        transition: background .22s ease, color .22s ease;
    }

    .mb-route-arrow::before {
        content: "";
        width: 7px;
        height: 7px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        transform: rotate(45deg);
    }

    .mb-nav .mb-menu li.active .mb-route-arrow {
        background: #fde6a0;
        color: #c98a00;
        box-shadow: none;
    }

    .mb-nav-footer {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: 5;
        flex: 0 0 auto;
        width: min(88%, 440px);
        margin-top: auto;
        padding: clamp(20px, 3vh, 30px) 0 clamp(28px, 4.5vh, 48px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        opacity: 0;
        transform: translateY(14px);
    }

    .mb-nav-footer::before,
    .mb-nav-footer::after {
        content: none;
    }

    .mb-nav.active .mb-nav-footer {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .55s ease .72s, transform .65s ease .72s;
    }

    .mb-sailboat {
        order: 1;
        width: clamp(72px, 9vh, 90px);
        height: auto;
        display: block;
        filter: drop-shadow(0 6px 12px rgba(30,90,120,.18));
        animation: mbBoatSway 4.8s ease-in-out infinite;
    }

    .mb-nav-footer p {
        order: 2;
        max-width: 360px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        color: #4a7080;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        font-size: clamp(.95rem, 1.32vh, 1.08rem);
        font-weight: 500;
        line-height: 1.55;
        text-align: center;
        letter-spacing: 0;
        word-break: keep-all;
    }

    .mb-nav-footer p span {
        display: block;
        margin-bottom: 6px;
        color: #2e6478;
        font-size: clamp(.82rem, 1.1vh, .95rem);
        font-weight: 700;
        letter-spacing: .44em;
    }

    .mb-sea-waves {
        display: none;
    }
}

@media screen and (max-width: 980px) and (max-height: 760px) {
    .mb-voyage-header { margin-top: 56px; }
    .mb-sun-mark { flex-basis: 52px; width: 52px; height: 52px; margin-bottom: 8px; }
    .mb-sun-svg { width: 52px; height: 52px; }
    .mb-voyage-title strong { font-size: 2.1rem; margin-bottom: 4px; }
    .mb-nav .mb-menu { margin-top: 14px; gap: 6px; }
    .mb-nav .mb-menu li a,
    .mb-nav .mb-menu li:hover a,
    .mb-nav .mb-menu li.active a,
    .mb-nav .mb-menu li.active:hover a { min-height: 50px; }
    .mb-nav-footer { padding-top: 16px; padding-bottom: 28px; gap: 6px; }
    .mb-sailboat { width: 62px; }
}

@media screen and (max-width: 980px) and (max-height: 620px) {
    .mb-voyage-title p,
    .mb-title-wave { display: none; }
    .mb-nav-footer p { display: none; }
    .mb-nav .mb-menu li a,
    .mb-nav .mb-menu li:hover a,
    .mb-nav .mb-menu li.active a,
    .mb-nav .mb-menu li.active:hover a { min-height: 44px; }
}

/* ====== 영역별 반응형 ====== */
@media screen and (min-width: 1101px) {
    .voyage-book-container {
        max-width: 1120px;
        height: 690px;
        background:
            linear-gradient(180deg, #785b40 0%, #684c33 76%, #5a3f2a 100%);
        border: 0;
        border-radius: 18px;
        box-shadow:
            0 54px 76px rgba(47, 32, 20, 0.34),
            0 22px 32px rgba(47, 32, 20, 0.24),
            inset 0 0 0 7px rgba(92, 64, 43, 0.18),
            inset 0 -8px 0 rgba(63, 43, 29, 0.16),
            inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    }

    .voyage-book-container::before {
        top: 9px;
        right: 9px;
        bottom: -8px;
        left: 9px;
        background:
            linear-gradient(180deg, #e8dcc4 0%, #d0bc9a 82%, #b18d61 100%);
        border: 1px solid rgba(81, 55, 33, 0.24);
        border-radius: 15px;
        box-shadow:
            0 10px 16px rgba(47, 32, 20, 0.2),
            inset 0 -6px 10px rgba(81, 55, 33, 0.14);
    }

    .voyage-book-container::after {
        content: none;
    }

    .book-page {
        padding: 54px 44px;
        background:
            linear-gradient(90deg, rgba(85, 63, 44, 0.14), rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(85, 63, 44, 0.1)),
            linear-gradient(90deg, rgba(122, 90, 55, 0.08) 0 7px, rgba(255, 255, 255, 0) 7px calc(100% - 7px), rgba(122, 90, 55, 0.08) calc(100% - 7px) 100%),
            linear-gradient(180deg, rgba(255, 255, 255, 0) 86%, rgba(148, 111, 72, 0.08) 100%),
            radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 42%),
            repeating-linear-gradient(0deg, rgba(160, 120, 80, 0.07) 0 1px, transparent 1px 20px),
            #fffdf8;
        border: 0;
    }

    .book-left-page {
        border-radius: 15px 3px 3px 15px;
        box-shadow:
            inset 8px 0 0 rgba(185, 151, 103, 0.1),
            inset -34px 0 42px rgba(62, 44, 31, 0.16),
            inset 0 0 0 1px rgba(255, 255, 255, 0.65);
    }

    .book-left-page::after {
        content: "";
        position: absolute;
        top: 22px;
        right: 14px;
        bottom: 22px;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(96, 70, 46, 0.16), transparent);
    }

    .book-right-page {
        padding-top: 52px;
        border-radius: 3px 15px 15px 3px;
        box-shadow:
            inset 34px 0 42px rgba(62, 44, 31, 0.15),
            inset -8px 0 0 rgba(185, 151, 103, 0.1),
            inset 0 0 0 1px rgba(255, 255, 255, 0.62);
    }

    .book-right-page::before {
        content: "";
        position: absolute;
        top: 22px;
        bottom: 22px;
        left: 14px;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(96, 70, 46, 0.14), transparent);
        pointer-events: none;
    }

    .book-spine {
        width: 12px;
        background:
            linear-gradient(90deg, rgba(48, 33, 22, 0.28), rgba(255, 255, 255, 0.28) 45%, rgba(47, 32, 20, 0.22) 100%),
            #d6c9b8;
        border-right: 1px solid rgba(55, 36, 22, 0.18);
        border-left: 1px solid rgba(55, 36, 22, 0.18);
        box-shadow:
            -6px 0 13px rgba(48, 33, 22, 0.14),
            6px 0 13px rgba(48, 33, 22, 0.12),
            inset 0 0 8px rgba(48, 33, 22, 0.16);
    }

    .gold-clip {
        top: 18px;
        left: 22px;
        width: 28px;
        height: 58px;
        border: 1px solid rgba(116, 83, 26, 0.5);
        background: linear-gradient(135deg, #b68b2e, #fff0a8 48%, #8f681e);
        box-shadow:
            3px 6px 12px rgba(42, 28, 18, 0.28),
            inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    }

    .watercolor-illustration {
        margin-top: 34px;
    }

    .watercolor-illustration img {
        padding: 14px;
        background: rgba(255, 252, 244, 0.76);
        border: 1px solid rgba(120, 91, 63, 0.1);
        box-shadow: 0 12px 24px rgba(72, 52, 34, 0.08);
    }
}

@media screen and (max-width: 1280px) {
    .voyage-book-container {
        height: 600px;
    }
    .book-page {
        padding: 35px 22px;
    }
    .book-tabs {
        right: 22px;
        gap: 4px;
    }
    .tab-item {
        padding: 9px 15px 20px 15px;
        font-size: 0.88rem;
    }
    .voyage-title-area p {
        font-size: 1.65rem;
        line-height: 1.6;
    }
    .watercolor-illustration img {
        max-height: 235px;
    }
    .project-list-scrollArea {
        margin-right: -12px;
        padding-right: 12px;
    }
    /* 1280px 이하에서 스크롤 뷰포트 내 레이아웃 가독성 및 컴팩트함 추가 최적화 */
    .proj-title {
        font-size: 2.0rem;
    }
    .info-row {
        margin-bottom: 10px;
    }
    .info-label {
        font-size: 1.3rem;
        margin-bottom: 4px;
        padding-bottom: 3px;
    }
    .info-text {
        font-size: 1.3rem;
        line-height: 1.6;
    }
    .info-goals,
    .info-spec-grid {
        font-size: 1.3rem;
        gap: 6px;
    }
    .tag {
        font-size: 1.15rem;
        padding: 2px 8px;
    }
    .btn-vintage-link {
        min-height: 40px;
        padding: 0 8px;
        font-size: 1.28rem;
    }
    .divider-line {
        margin: 20px 0;
    }
}

@media screen and (max-width: 1100px) {
    .voyage-book-decorations {
        display: none;
    }
    .voyage-book-container {
        flex-direction: column;
        height: auto;
        width: 100%;
        background: #4a3627;
        border-radius: 12px;
        box-shadow:
            0 20px 40px rgba(0, 0, 0, 0.4),
            inset 0 0 10px rgba(0, 0, 0, 0.7);
        padding: 12px;
        margin: 20px 0;
        position: relative;
        border: 2px solid #2e2015;
    }

    .voyage-book-container::after {
        content: "";
        position: absolute;
        top: 5px;
        bottom: 5px;
        left: 5px;
        right: 5px;
        border: 1px dashed rgba(255, 255, 255, 0.25);
        border-radius: 8px;
        pointer-events: none;
    }

    .book-left-page {
        order: 1;
        border-radius: 5px 5px 0 0;
        box-shadow: none;
        padding: 30px 20px 10px 20px;
        background: #f4efea;
        margin: 0;
        z-index: 2;
    }

    .book-left-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 0;
    }

    .voyage-title-area {
        margin-top: 15px;
        margin-bottom: 25px;
    }

    .voyage-title-area h2 {
        margin-bottom: 15px;
    }

    .voyage-title-area p {
        font-size: 1.7rem;
        line-height: 1.6;
        color: #4a3e30;
    }

    .watercolor-illustration {
        flex: 1;
        min-height: 0;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .watercolor-illustration img {
        max-height: 260px;
        width: auto;
        max-width: 85%;
        object-fit: contain;
    }

    .book-tabs {
        order: 2;
        top: 0;
        right: 0;
        left: 0;
        position: relative;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
        padding: 15px 15px 25px 15px;
        background: #f4efea;
        border-radius: 0 0 5px 5px;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
        -webkit-overflow-scrolling: touch;
        border-bottom: none;
        z-index: 2;
        gap: 10px 5px;
    }
    .book-tabs::-webkit-scrollbar {
        display: none;
    }

    .book-tabs::before {
        content: "❖ 항해 기록 분류 ❖";
        position: absolute;
        top: -10px;
        left: 0;
        width: 100%;
        text-align: center;
        color: #7a6a58;
        font-size: 0.8rem;
        font-weight: 700;
    }

    .tab-item {
        flex: 0 0 30%;
        max-width: 160px;
        aspect-ratio: 1 / 1.1;
        padding: 12px 2px;
        font-size: 0.7rem;
        line-height: 1.3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #4a5d66;
        border-radius: 0;
        margin: 0;
        position: relative;
        background: transparent;
        border: none;
        box-shadow: none;
        z-index: 1;
    }

    .tab-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;

        -webkit-mask-image: radial-gradient(
            circle at 4px 4px,
            transparent 2px,
            black 2.5px
        );
        -webkit-mask-size: 8px 8px;
        -webkit-mask-position: -4px -4px;
        mask-image: radial-gradient(
            circle at 4px 4px,
            transparent 2px,
            black 2.5px
        );
        mask-size: 8px 8px;
        mask-position: -4px -4px;
    }

    .tab-item:nth-child(1)::before {
        background: #e8e2d5;
    }
    .tab-item:nth-child(2)::before {
        background: #d0e0e3;
    }
    .tab-item:nth-child(3)::before {
        background: #d9ead3;
    }
    .tab-item:nth-child(4)::before {
        background: #d9d2e9;
    }
    .tab-item:nth-child(5)::before {
        background: #f4cccc;
    }

    .tab-item:hover,
    .tab-item.active {
        color: #3b2f2f;
        font-weight: 700;
        transform: scale(1.05) translateY(-2px);
        filter: brightness(0.95);
        background: transparent;
    }

    .book-spine {
        order: 3;
        display: block;
        width: 100%;
        height: 25px;
        background: linear-gradient(to bottom, #2e2015, #1c120a, #2e2015);
        margin: -5px 0;
        border-radius: 2px;
        box-shadow:
            inset 0 2px 5px rgba(0, 0, 0, 0.8),
            0 5px 10px rgba(0, 0, 0, 0.5);
        position: relative;
        z-index: 1;
    }

    .book-right-page {
        order: 4;
        border-radius: 5px;
        background: #f4efea;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        margin-top: 10px;
        padding: 30px 20px;
        position: relative;
        z-index: 2;
    }

    .project-list-scrollArea {
        height: auto;
        max-height: 520px;
        overflow-y: scroll;
        padding-right: 25px;
        margin-right: 0;
    }
    .proj-body {
        flex-direction: column;
        gap: 15px;
    }
    .proj-thumb {
        width: 100%;
        max-height: 220px;
        aspect-ratio: 16/10;
    }
    .proj-actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 5px;
    }
    .btn-vintage-link {
        flex: 1;
        min-width: 80px;
        min-height: 40px;
        padding: 0 8px;
    }
    .proj-info {
        width: 100%;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
    #design-work {
        padding-top: 72px;
    }
    #design-work .section-title {
        margin-bottom: 60px;
    }
    .mini-wheel-wrap {
        height: 440px;
    }
    .mini-wheel-wrap .wheel-frame {
        width: 280px;
        height: 280px;
        margin-left: -140px;
        margin-top: -140px;
    }
    .mini-wheel-wrap .polaroid-card {
        width: 280px;
        height: 280px;
        padding: 10px 10px 16px;
    }
    .mini-wheel-wrap .polaroid-img {
        height: 178px;
    }
    .mini-wheel-wrap .btnPrev {
        left: max(10px, calc(50% - 140px - 68px));
    }
    .mini-wheel-wrap .btnNext {
        right: max(10px, calc(50% - 140px - 68px));
    }
    .wheel-bottom-info {
        margin-top: -126px;
    }
    .wheel-bottom-info .info-title {
        font-size: 2.8rem;
    }
    .wheel-bottom-info .info-desc {
        font-size: 1.45rem;
    }
    .mini-wheel-wrap .stamp-wrapper {
        top: 12px;
        right: 12px;
        transform: scale(0.8) rotate(5deg);
        transform-origin: top right;
    }
    .mini-wheel-wrap article .polaroid-caption {
        margin-top: 10px;
    }
    .mini-wheel-wrap article .polaroid-caption h3 {
        font-family: 'Nanum Pen Script', 'NanumPenScript', cursive;
        font-size: 2.5rem;
        line-height: 1.1;
        margin-top: 0;
        margin-bottom: 0;
    }
    .mini-wheel-wrap article .polaroid-caption .desc {
        font-family: 'Nanum Pen Script', 'NanumPenScript', cursive;
        font-size: 2rem;
        margin-top: 2px;
    }
}

@media screen and (max-width: 1024px) {
    #design-work {
        scroll-margin-top: 114px;
        background: url("../images/new_drawer_bg.jpg") center/cover no-repeat;
        padding-top: 72px;
    }
    .mini-wheel-wrap {
        height: 430px;
        margin-top: 0px;
    }
    .mini-wheel-wrap .wheel-frame {
        width: 260px;
        height: 260px;
        margin-left: -130px;
        margin-top: -130px;
    }
    .mini-wheel-wrap .polaroid-card {
        width: 260px;
        height: 260px;
        padding: 9px 9px 14px;
    }
    .mini-wheel-wrap .polaroid-img {
        height: 165px;
    }
    .mini-wheel-wrap .stamp-wrapper {
        top: 10px;
        right: 10px;
        transform: scale(0.72) rotate(5deg);
        transform-origin: top right;
    }
    .mini-wheel-wrap article .polaroid-caption {
        margin-top: 10px;
    }
    .mini-wheel-wrap article .polaroid-caption h3 {
        font-family: 'Nanum Pen Script', 'NanumPenScript', cursive;
        font-size: 2.3rem;
        line-height: 1.1;
        margin-top: 0;
        margin-bottom: 0;
    }
    .mini-wheel-wrap article .polaroid-caption .desc {
        font-family: 'Nanum Pen Script', 'NanumPenScript', cursive;
        font-size: 1.9rem;
        margin-top: 2px;
    }
    .mini-wheel-wrap .btnPrev,
    .mini-wheel-wrap .btnNext {
        top: 33%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
    }
    .mini-wheel-wrap .btnPrev svg,
    .mini-wheel-wrap .btnNext svg {
        width: 28px;
        height: 28px;
    }
    .mini-wheel-wrap .btnPrev {
        left: max(8px, calc(50% - 130px - 58px));
    }
    .mini-wheel-wrap .btnNext {
        right: max(8px, calc(50% - 130px - 58px));
    }
    .wheel-bottom-info {
        margin-top: -110px;
        padding: 0 20px 20px;
    }
    .wheel-bottom-info .info-title {
        font-size: 2.5rem;
    }
    .wheel-bottom-info .info-desc {
        font-size: 1.45rem;
    }
    .wheel-bottom-info .info-index {
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --dw-card-size: clamp(230px, 58vw, 300px);
        --dw-card-half: clamp(115px, 29vw, 150px);
        --dw-card-img-height: clamp(145px, 37vw, 190px);
    }
    .mini-wheel-wrap {
        height: 430px; /* 카드 확대에 맞춘 모바일 컨테이너 높이 */
        margin-top: 0px;
    }
    .mini-wheel-wrap .btnPrev,
    .mini-wheel-wrap .btnNext {
        top: 38%; /* 모바일 카드 중앙 */
        transform: translateY(-50%);
        width: 44px; /* 모바일 전용 슬림 사이즈 최적화 */
        height: 44px;
    }
    .mini-wheel-wrap .btnPrev svg,
    .mini-wheel-wrap .btnNext svg {
        width: 24px;
        height: 24px;
    }
    .mini-wheel-wrap .btnPrev {
        left: max(8px, calc(50% - var(--dw-card-half) - 54px));
    }
    .mini-wheel-wrap .btnNext {
        right: max(8px, calc(50% - var(--dw-card-half) - 54px));
    }
    .mini-wheel-wrap .wheel-frame {
        width: var(--dw-card-size);
        height: var(--dw-card-size);
        margin-left: calc(0px - var(--dw-card-half));
        margin-top: calc(0px - var(--dw-card-half));
        top: 88%;
    }
    .mini-wheel-wrap article .polaroid-card {
        width: var(--dw-card-size);
        height: var(--dw-card-size);
        padding: 6px 6px 10px 6px;
    }
    .mini-wheel-wrap article .polaroid-img {
        height: var(--dw-card-img-height);
    }
    .wheel-bottom-info {
        margin-top: -130px; /* 모바일 비례 보정 */
        padding: 0 16px 20px;
    }
    .wheel-bottom-info .info-title {
        font-size: 2rem;
    }
    .wheel-bottom-info .info-desc {
        font-size: 1.25rem;
        max-width: 280px;
        margin: 0 auto 10px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .wheel-bottom-info .info-desc br {
        display: none;
    }
    .wheel-bottom-info .info-index {
        font-size: 1.3rem;
        width: 104px;
        height: 32px;
        padding: 0 14px;
    }
    .work-filter-controls {
        gap: 14px;
    }
    .work-filter-btn {
        width: auto;
        height: 29px;
        padding: 0;
        font-size: 1.28rem;
    }
    .mini-wheel-wrap .stamp-wrapper {
        top: 8px;
        right: 8px;
        transform: scale(0.65) rotate(5deg);
    }
    .mini-wheel-wrap article .polaroid-caption {
        margin-top: 8px;
    }
    .mini-wheel-wrap article .polaroid-caption h3 {
        font-size: 2rem;
        padding-bottom: 2px;
    }
    .mini-wheel-wrap article .polaroid-caption .desc {
        font-size: 1.7rem;
        margin-top: 0;
    }
}

@media screen and (max-width: 600px) {
    .about-card-swiper .swiper-slide-active .about-card {
        -webkit-font-smoothing: antialiased;
        text-rendering: geometricPrecision;
    }
    .about-card-swiper .swiper-slide-active .about-card-02 .ac-body,
    .about-card-swiper .swiper-slide-active .about-card-02 .ac-icon-list li > span:nth-child(2) {
        color: #3f3328;
    }
    .about-card-swiper .swiper-slide-active .about-card-02 .ac-book,
    .about-card-swiper .swiper-slide-active .about-card-02 .ac-italic {
        color: #6f533b;
    }
    .about-card-swiper .swiper-slide-active .about-card-03,
    .about-card-swiper .swiper-slide-active .about-card-03 .ac-ps-section ul li {
        color: #304c46;
    }
}

@media screen and (min-width: 1101px) {
    .book-tabs {
        top: 50%;
        transform: translateY(-50%);
        right: -36px; /* Move outside right edge */
        flex-direction: column; /* Stack vertically */
        gap: 9px;
        width: 50px;
        filter: drop-shadow(4px 6px 8px rgba(47, 32, 20, 0.13));
    }
    .tab-item {
        position: relative;
        font-size: 1.4rem;
        line-height: 1;
        padding: 18px 0;
        border-radius: 0 12px 12px 0;
        box-shadow:
            4px 4px 9px rgba(47, 32, 20, 0.09),
            inset 1px 0 0 rgba(255, 255, 255, 0.65);
        border: 1px solid rgba(126, 97, 61, 0.16);
        border-left: none;
        transform-origin: left center;
        background:
            linear-gradient(90deg, #d2be97 0 4px, #efe4cd 4px 100%);
        
        display: flex;
        align-items: center;
        justify-content: center;
        
        writing-mode: vertical-rl;
        text-orientation: upright;
        letter-spacing: 2px;
        color: #5a4b3c;
        font-weight: 700;
        transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    }
    .tab-item:hover,
    .tab-item.active {
        transform: translateX(10px); /* pop out to the right */
        background:
            linear-gradient(90deg, #b9965f 0 4px, #f6edd9 4px 100%);
        box-shadow:
            6px 5px 13px rgba(47, 32, 20, 0.14),
            inset 1px 0 0 rgba(255, 255, 255, 0.72);
    }
    .tab-item.active {
        background:
            linear-gradient(90deg, #3f6049 0 4px, #dfe8d8 4px 100%);
        color: #2d4d38;
        border: 2px solid rgba(63, 96, 73, 0.72);
        border-left: none;
        box-shadow:
            8px 6px 16px rgba(47, 32, 20, 0.17),
            inset 1px 0 0 rgba(255, 255, 255, 0.76);
    }
}

@media screen and (min-width: 1101px) and (max-width: 1280px) {
    section.voyage-log-section {
        padding: 100px 70px; /* 좌우 패딩을 늘려서 화면 잘림을 방지 (specificity increased) */
    }
    .book-tabs {
        top: 50%;
        transform: translateY(-50%);
        right: -32px; /* Move outside right edge slightly closer */
        gap: 4px;
        width: 44px;
    }
    .tab-item {
        font-size: 1.15rem;
        padding: 14px 0;
        border-radius: 0 8px 8px 0;
        letter-spacing: 1px;
    }
    .tab-item:hover,
    .tab-item.active {
        transform: translateX(8px);
    }
    .tab-item.active {
        border: 2px solid rgba(63, 96, 73, 0.72);
        border-left: none;
    }
}

@media screen and (max-width: 1100px) {
    .voyage-log-section {
        background-image:
            linear-gradient(rgba(44, 35, 25, 0.08), rgba(44, 35, 25, 0.14)),
            url("../images/desk_bg.jpg");
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: auto, cover;
        background-attachment: scroll;
        padding: 82px 18px 68px;
        overflow: hidden;
    }

        .voyage-book-wrapper {
        width: 96%;
        max-width: 620px;
        padding: 20px 2px 0;
        overflow: visible;
    }

    .voyage-book-decorations {
        display: none;
    }

    .voyage-book-container {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        height: min(calc(var(--app-height) - 116px), 760px);
        min-height: 0;
        margin: 0 auto;
        padding: 10px;
        background:
            linear-gradient(135deg, #5a4634 0%, #3d2b1f 100%);
        border: 1px solid rgba(34, 22, 14, 0.55);
        border-radius: 14px;
        box-shadow:
            0 26px 44px rgba(22, 14, 8, 0.42),
            inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        perspective: none;
        z-index: 3;
    }

    .voyage-book-container::before,
    .voyage-book-container::after,
    .book-spine,
    .watercolor-illustration {
        display: none;
    }

    .book-left-page .gold-clip {
        display: block;
        top: -24px;
        left: 50%;
        width: 132px;
        height: 42px;
        border: 2px solid rgba(78, 74, 66, 0.55);
        border-radius: 12px 12px 8px 8px;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0 8px, transparent 8px),
            linear-gradient(180deg, #d9e1df 0%, #f8fbf8 46%, #8f9b9a 100%);
        box-shadow:
            0 5px 0 rgba(58, 45, 34, 0.38),
            0 11px 16px rgba(42, 28, 18, 0.24),
            inset 0 0 0 1px rgba(255, 255, 255, 0.65);
        transform: translateX(-50%);
        z-index: 20;
    }

    .book-left-page .gold-clip::before {
        content: "";
        position: absolute;
        top: -12px;
        left: 50%;
        width: 42px;
        height: 22px;
        border: 3px solid #8f9b9a;
        border-bottom: 0;
        border-radius: 18px 18px 0 0;
        background: transparent;
        transform: translateX(-50%);
    }

    .book-left-page .gold-clip::after {
        content: "";
        position: absolute;
        top: 11px;
        left: 13px;
        right: 13px;
        bottom: 9px;
        border: 2px solid rgba(83, 74, 64, 0.58);
        border-top-color: rgba(255, 255, 255, 0.7);
        border-radius: 6px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(117, 121, 116, 0.18));
    }

    .book-page {
        width: 100%;
        height: auto;
        min-height: 0;
        box-sizing: border-box;
        overflow: visible;
    }

    .book-left-page {
        order: 1;
        flex: 0 0 auto;
        padding: 18px 0 0;
        background: #f7f0e4;
        border-radius: 8px 8px 0 0;
        box-shadow:
            inset 0 -12px 24px rgba(111, 83, 54, 0.08),
            0 8px 14px rgba(34, 22, 14, 0.12);
    }

    .book-left-content {
        display: block;
        min-height: 0;
    }

    .voyage-title-area {
        position: relative;
        margin: 0;
        padding: 20px 22px 16px 32px;
        text-align: left;
        background:
            repeating-linear-gradient(0deg, transparent 0 29px, rgba(111, 83, 54, 0.08) 29px 30px),
            rgba(255, 252, 244, 0.96);
        border: 1px solid rgba(111, 83, 54, 0.16);
        border-radius: 8px 8px 0 0;
        box-shadow: none;
    }

    .voyage-title-area::before {
        content: "";
        position: absolute;
        top: -9px;
        left: 34px;
        width: 74px;
        height: 18px;
        background-color: rgba(255, 209, 117, 0.46);
        border-radius: 2px;
        transform: rotate(-2deg);
    }

    .voyage-title-area::after {
        content: "";
        position: absolute;
        top: 16px;
        bottom: 16px;
        left: 20px;
        border-left: 1px dotted rgba(111, 83, 54, 0.36);
    }

    .anchor-icon {
        display: none;
    }

    .sub-title-vintage {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        margin: 0 0 8px;
        padding: 0 12px;
        background: rgba(71, 104, 81, 0.08);
        border: 1px solid rgba(71, 104, 81, 0.14);
        border-radius: 999px;
        color: var(--color-accent);
        font-size: 1.18rem;
        font-weight: 800;
        letter-spacing: 0.16em;
    }

    .voyage-title-area h2 {
        display: block;
        margin: 0 0 7px;
        padding: 0 0 7px;
        border-bottom: 1px solid rgba(71, 104, 81, 0.16);
        color: #143f42;
        font-size: 4.4rem;
        line-height: 1;
        letter-spacing: 0;
    }

    .voyage-title-area p {
        max-width: 28em;
        color: #355d58;
        font-size: 1.52rem;
        line-height: 1.55;
        word-break: keep-all;
    }

    .book-tabs {
        order: 2;
        flex: 0 0 auto;
        position: relative;
        inset: auto;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        margin: 0;
        padding: 9px 16px 11px 28px;
        overflow-x: auto;
        background: #f7f0e4;
        border-radius: 0;
        box-shadow: inset 0 -1px 0 rgba(111, 83, 54, 0.12);
        z-index: 2;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .book-tabs::before {
        content: none;
    }

    .book-tabs::-webkit-scrollbar {
        display: none;
    }

    .tab-item {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        min-width: max-content;
        height: auto;
        aspect-ratio: auto;
        min-height: 38px;
        padding: 0 17px;
        background: rgba(255, 252, 244, 0.95);
        border: 1px solid rgba(111, 83, 54, 0.14);
        border-radius: 999px;
        box-shadow:
            0 4px 10px rgba(72, 52, 34, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.82);
        color: #3f6358;
        font-size: 1.28rem;
        line-height: 1.2;
        font-weight: 700;
        text-align: center;
        transition:
            color 0.25s ease,
            background-color 0.25s ease,
            border-color 0.25s ease,
            transform 0.25s ease,
            box-shadow 0.25s ease;
    }

    .tab-item::before {
        content: none;
    }

    .tab-item::after {
        content: none;
    }

    .tab-item:hover,
    .tab-item.active {
        background: #e3eadf;
        color: #3f6049;
        border-color: rgba(71, 104, 81, 0.26);
        filter: none;
        transform: translateY(-2px);
        box-shadow:
            0 7px 14px rgba(28, 43, 32, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }

    .book-right-page {
        order: 3;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0 0 4px;
        margin: 0;
        position: relative;
        background: #f7f0e4;
        border-radius: 0 0 8px 8px;
        box-shadow:
            inset 0 14px 24px rgba(111, 83, 54, 0.06),
            0 14px 22px rgba(34, 22, 14, 0.18);
        overflow: hidden;
    }

    .project-list-scrollArea {
        height: 100%;
        max-height: none;
        overflow-y: auto;
        margin: 0 -3px 0 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: rgba(125, 101, 70, 0.78) rgba(111, 83, 54, 0.12);
        scrollbar-width: thin;
    }

    .project-list-scrollArea::-webkit-scrollbar {
        width: 7px;
    }

    .project-list-scrollArea::-webkit-scrollbar-track {
        background: rgba(111, 83, 54, 0.12);
        border-radius: 999px;
    }

    .project-list-scrollArea::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #b59668, #7d6546);
        border: 1px solid rgba(247, 240, 228, 0.9);
        border-radius: 999px;
    }

    .scroll-cue {
        right: 10px;
        top: 18px;
        gap: 4px;
        padding: 6px 4px;
    }

    .scroll-cue-track {
        --cue-dot-end: 22px;
        height: 30px;
    }

    .scroll-cue-track i {
        width: 4px;
        height: 4px;
    }

    .tab-pane.active {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .voyage-project-item {
        position: relative;
        margin: 0;
        padding: 18px 15px 16px;
        background:
            repeating-linear-gradient(0deg, transparent 0 29px, rgba(111, 83, 54, 0.06) 29px 30px),
            rgba(255, 252, 244, 0.97);
        border: 1px solid rgba(111, 83, 54, 0.12);
        border-radius: 7px;
        box-shadow: 0 8px 18px rgba(72, 52, 34, 0.08);
    }

    .voyage-project-item::before {
        content: "";
        position: absolute;
        top: 16px;
        bottom: 16px;
        left: 14px;
        border-left: 1px dotted rgba(111, 83, 54, 0.25);
    }

    .proj-header,
    .proj-body {
        position: relative;
        z-index: 1;
    }
        .proj-header {
        margin-bottom: -2px;
        padding-left: 12px;
    }

    .proj-category-badge {
        padding: 4px 9px;
        font-size: 1.18rem;
        border-radius: 999px;
        margin-right: 6px;
    }

    .proj-number {
        font-size: 1.32rem;
        color: #60766f;
    }

    .proj-title {
        margin: 6px 0 4px;
        color: #143f42;
        font-size: 2.08rem;
        line-height: 1.32;
        letter-spacing: 0;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

        .proj-date {
        text-align: right;
        color: #67817a;
        font-size: 1.35rem;
        padding-bottom: 0px;
        border-bottom-color: rgba(71, 104, 81, 0.12);
        flex: 0 0 100%; /* Force it to its own line so it never gets squeezed by tags */
    }

    .proj-body {
        gap: 12px;
    }

    .proj-thumb {
        aspect-ratio: 16 / 9;
        max-height: 220px;
        padding: 4px;
        border-color: rgba(71, 104, 81, 0.14);
        border-radius: 6px;
        box-shadow: 0 6px 16px rgba(28, 43, 32, 0.08);
        overflow: hidden;
    }

    .proj-thumb .work-thumb-placeholder {
        width: 100%;
        height: 100%;
    }

    .proj-thumb .work-thumb-placeholder img {
        width: 100%;
        height: auto;
        min-height: 100%;
    }

    .proj-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
    }

    .btn-vintage-link {
        flex: 1 1 calc((100% - 16px) / 3);
        min-width: 0;
        min-height: 40px;
        padding: 0 6px;
        font-size: 1.22rem;
        border-color: var(--color-accent);
        border-radius: 5px;
        white-space: nowrap;
    }

    .proj-info {
        gap: 8px;
    }

    .info-row {
        margin: 0;
        padding: 10px 11px;
        background: rgba(255, 255, 255, 0.52);
        border: 1px solid rgba(71, 104, 81, 0.1);
        border-radius: 6px;
    }

    .info-label {
        margin-bottom: 7px;
        padding-bottom: 5px;
        color: #234f4d;
        border-bottom-color: rgba(71, 104, 81, 0.12);
        font-size: 1.46rem;
    }

    .info-text,
    .info-goals,
    .info-spec-grid {
        color: #324541;
        font-size: 1.38rem;
        line-height: 1.58;
    }

    .goal-item {
        display: grid;
        grid-template-columns: 4.9em 1fr;
        gap: 8px;
        padding: 6px 0;
    }

    .goal-item + .goal-item {
        border-top: 1px dashed rgba(71, 104, 81, 0.16);
    }

    .goal-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        margin: 0;
        padding: 2px 8px;
        border-radius: 999px;
        background: rgba(71, 104, 81, 0.08);
        color: var(--color-accent);
        font-size: 1.28rem;
    }

    .goal-value {
        display: block;
        color: #33433f;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .info-spec-grid {
        gap: 5px;
    }

    .info-spec-grid li {
        display: grid;
        grid-template-columns: minmax(6.4em, auto) 1fr;
        gap: 6px;
        align-items: start;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .info-spec-grid li strong {
        width: auto;
        margin: 0;
        color: var(--color-accent);
    }

    .divider-line {
        display: none;
    }

    .desk-footer-text {
        margin-top: 40px;
        color: #fff;
        font-family: var(--font-main);
        font-style: italic;
        font-size: 1.8rem;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    }
}

@media screen and (max-width: 600px) {
    .voyage-log-section {
        background-position: center top;
        background-size: auto, cover;
        padding: 72px 14px 58px;
    }

    .voyage-book-container {
        height: min(calc(var(--app-height) - 104px), 700px);
    }

    .book-tabs {
        cursor: grab;
    }

    .book-tabs:active {
        cursor: grabbing;
    }

    .voyage-title-area {
        padding: 18px 18px 14px 29px;
    }

    .voyage-title-area h2 {
        font-size: 3.35rem;
    }

    .voyage-title-area p {
        font-size: 1.38rem;
        line-height: 1.52;
    }

    .tab-item {
        padding: 8px 12px;
        font-size: 1.16rem;
    }

    .book-tabs {
        padding: 9px 12px 11px 22px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .tab-item {
        flex: 1 1 calc((100% - 12px) / 3);
        min-width: 88px;
    }

    .voyage-project-item {
        padding: 16px 13px 14px;
    }

    .proj-title {
        font-size: 1.88rem;
    }

    .proj-actions {
        flex-wrap: wrap;
    }

    .info-spec-grid li {
        grid-template-columns: minmax(5.8em, auto) 1fr;
    }
}

@media screen and (max-width: 480px) {
    .voyage-log-section {
        background-position: center top;
        background-size: auto, cover;
        padding: 64px 12px 56px;
    }

    .voyage-book-wrapper {
        padding: 0;
    }

    .voyage-book-container {
        height: min(calc(var(--app-height) - 84px), 680px);
        padding: 8px;
        border-radius: 12px;
    }

    .book-left-page {
        border-radius: 7px 7px 0 0;
    }

    .voyage-title-area {
        padding: 16px 16px 13px 27px;
    }

    .voyage-title-area::before {
        left: 28px;
        width: 66px;
        height: 16px;
    }

    .voyage-title-area::after {
        left: 17px;
    }

    .sub-title-vintage {
        min-height: 24px;
        margin-bottom: 6px;
        padding: 0 10px;
        font-size: 1rem;
        letter-spacing: 0.17em;
    }

    .voyage-title-area h2 {
        margin-bottom: 6px;
        padding-bottom: 6px;
        font-size: 3.18rem;
    }

    .voyage-title-area p {
        font-size: 1.32rem;
        line-height: 1.52;
    }

    .book-tabs {
        gap: 6px;
        padding: 8px 10px 10px 18px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .tab-item {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 0 10px;
        font-size: 1.05rem;
        white-space: nowrap;
    }

    .book-right-page {
        padding-bottom: 3px;
    }

    .project-list-scrollArea {
        padding: 0 6px 16px 0;
    }

    .tab-pane.active {
        gap: 12px;
    }

    .voyage-project-item {
        padding: 14px 11px 13px;
    }

    .voyage-project-item::before {
        left: 11px;
    }

    .proj-header {
        padding-left: 10px;
    }

    .proj-category-badge {
        font-size: 1.08rem;
    }

    .proj-number,
    .proj-date {
        font-size: 1.18rem;
    }

    .proj-title {
        font-size: 1.78rem;
    }

    .proj-thumb {
        aspect-ratio: 16 / 9;
        max-height: 190px;
    }

    .proj-actions {
        gap: 6px;
    }

    .btn-vintage-link {
        flex-basis: calc((100% - 6px) / 2);
        min-height: 40px;
        padding: 0 5px;
        font-size: 1.16rem;
        letter-spacing: 0;
    }

    .btn-vintage-link:nth-child(3) {
        flex-basis: 100%;
    }

    .info-row {
        padding: 9px 9px;
    }

    .info-label {
        font-size: 1.32rem;
    }

    .info-text,
    .info-goals,
    .info-spec-grid {
        font-size: 1.26rem;
        line-height: 1.55;
    }

    .goal-item,
    .info-spec-grid li {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media screen and (max-width: 420px) {
    .voyage-log-section {
        padding-left: 10px;
        padding-right: 10px;
        overflow-x: hidden;
    }

    .voyage-book-container {
        padding: 8px;
    }

    .voyage-title-area h2 {
        font-size: 3rem;
    }

    .sub-title-vintage {
        font-size: 1rem;
        letter-spacing: 0.14em;
    }

    .tab-item {
        min-height: 30px;
        padding: 0 8px;
        font-size: 1rem;
    }

    .goal-item,
    .info-spec-grid li {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media screen and (max-width: 400px) {
    .voyage-log-section {
        background-position: center top;
        background-size: auto, cover;
        padding-top: 58px;
        padding-bottom: 50px;
    }

    .voyage-book-container {
        height: min(calc(var(--app-height) - 78px), 650px);
        padding: 7px;
        border-radius: 11px;
    }

    .voyage-title-area {
        padding: 14px 13px 12px 24px;
    }

    .voyage-title-area::before {
        left: 24px;
        width: 58px;
        height: 14px;
    }

    .voyage-title-area::after {
        left: 15px;
        top: 14px;
        bottom: 14px;
    }

    .sub-title-vintage {
        min-height: 22px;
        padding: 0 9px;
        font-size: 0.96rem;
        letter-spacing: 0.12em;
    }

    .voyage-title-area h2 {
        font-size: 2.96rem;
    }

    .voyage-title-area p {
        font-size: 1.24rem;
        line-height: 1.5;
    }

    .book-tabs {
        gap: 6px;
        padding: 8px 10px 10px 15px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .tab-item {
        flex: 0 0 auto;
        min-height: 28px;
        padding: 0 6px;
        font-size: 0.95rem;
    }

        .project-list-scrollArea {
        padding: 0 7px 100px 0; /* 늘려서 맨 아래 버튼 안 잘리게 */
    }

        .tab-pane.active {
        gap: 10px;
    }
    
    .tab-pane.active::after {
        content: "";
        display: block;
        height: 60px; /* 강제 여백 */
        flex-shrink: 0;
    }

    .voyage-project-item {
        padding: 13px 9px 12px;
    }

    .voyage-project-item::before {
        left: 9px;
    }

    .proj-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 7px 6px;
        padding-left: 9px;
    }

    .proj-category-badge {
        flex: 0 0 auto;
        padding: 3px 7px;
        font-size: 1rem;
    }

    .proj-number {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 1.1rem;
        line-height: 1.35;
    }

    .proj-date {
        flex: 0 0 100%;
        font-size: 1.1rem;
    }

        .proj-title {
        flex: 0 0 100%;
        font-size: 1.68rem;
        line-height: 1.45;
    }

@media screen and (max-width: 441px) {
    .proj-title {
        font-size: 1.5rem;
        line-height: 1.45;
    }
    .proj-title .break-441 {
        display: block;
    }
}
@media screen and (max-width: 400px) {
    .proj-title .break-441 {
        display: inline;
    }
    .proj-title .break-400 {
        display: block;
    }
}

    .tag-list {
        flex: 0 0 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 1px;
    }

    .tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-height: 22px;
        padding: 0 7px;
        border-radius: 999px;
        font-size: 0.96rem;
        line-height: 1;
        white-space: nowrap;
        font-weight: 600;
    }

    .proj-body {
        gap: 8px;
    }

    .proj-thumb {
        max-height: 175px;
    }

    .proj-actions {
        gap: 5px;
    }

    .btn-vintage-link {
        flex-basis: calc((100% - 5px) / 2);
        min-height: 38px;
        padding: 0 4px;
        font-size: 1.1rem;
    }

    .info-row {
        padding: 8px 8px;
    }

    .info-label {
        margin-bottom: 6px;
        font-size: 1.26rem;
    }

    .info-text,
    .info-goals,
    .info-spec-grid {
        font-size: 1.2rem;
        line-height: 1.52;
    }

    .goal-label {
        justify-content: flex-start;
        width: fit-content;
        font-size: 1.14rem;
    }

    .desk-footer-text {
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 368px) {
    .proj-header {
        gap: 6px;
        padding-left: 7px;
    }

    .proj-category-badge {
        padding: 3px 7px;
        font-size: 0.96rem;
    }

    .proj-number,
    .proj-date {
        font-size: 1.06rem;
    }

    .proj-title {
        font-size: 1.58rem;
    }

    .tag-list {
        gap: 4px;
    }

    .tag {
        width: auto;
        min-height: 21px;
        padding: 0 6px;
        font-size: 0.92rem;
    }
}

@media screen and (max-width: 1100px) and (max-height: 720px) {
    .voyage-log-section {
        padding-top: 58px;
        padding-bottom: 46px;
    }

    .voyage-book-container {
        height: min(calc(var(--app-height) - 92px), 650px);
        max-height: none;
    }

    .book-right-page {
        flex: 1 1 auto;
        min-height: 0;
    }

    .project-list-scrollArea {
        height: 100%;
        min-height: 0;
    }
}

/* ===== 1480px 이하 ===== */

@media screen and (max-width: 1480px) {
    .container {
        width: 96%;
    }
}

/* ===== 1280px 이하 ===== */
@media screen and (max-width: 1280px) {
    .section {
        padding: 100px 0;
        height: auto;
        min-height: 0;
    }

    .hero-section.section {
        padding: 0;
        height: var(--app-height);
        min-height: 560px;
    }
    h2 {
        font-size: 5rem;
    }
    h3 {
        font-size: 2.6rem;
    }
    h4 {
        font-size: 1.9rem;
    }
    .desc {
        font-size: 1.6rem;
    }

    .about-grid {
        gap: 40px;
    }
    .about-img-placeholder {
        max-width: 300px;
    }

    header nav ul {
        gap: 20px;
    }
    header nav ul li a {
        font-size: 1.4rem;
    }

    .slogan-sub-poetic {
        font-size: 2.5rem;
        margin-bottom: 16px;
    }
    .slogan-title {
        margin-bottom: 20px;
    }
    .slogan-title .title-support {
        margin-bottom: 7px;
        font-size: 4.1rem; /* 확대 비례 반영 */
    }
    .slogan-title .title-main {
        font-size: 5.4rem; /* 확대 비례 반영 */
    }
    .slogan-name {
        font-size: 2.4rem; /* 확대 비례 반영 */
    }
    .hero-actions .btn {
        padding: 10px 24px;
    }
}

/* ===== 980px 이하 ===== */
@media screen and (max-width: 980px) {
    .section {
        padding: 90px 0;
        height: auto;
        min-height: 0;
    }
    h2 {
        font-size: 4.8rem;
    }
    h3 {
        font-size: 2.4rem;
    }
    h4 {
        font-size: 1.8rem;
    }
    .desc {
        font-size: 1.5rem;
    }

    .br-mobile {
        display: block;
    }

    .certificate-frame {
        padding: 15px;
        margin: 20px 0;
    }
    .certificate-paper {
        padding: 30px 20px;
        border-width: 4px;
    }
    .cert-title {
        font-size: 2.2rem;
        letter-spacing: 2px;
    }
    .cert-subtitle {
        font-size: 1.2rem;
        letter-spacing: 2px;
        margin-bottom: 25px;
    }
    .cert-philosophy p {
        font-size: 1.4rem;
    }
    .cert-profile-section,
    .cert-details-row {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }
    .cert-photo {
        margin: 0 auto;
        width: 120px;
        height: 120px;
    }
    .cert-info,
    .cert-column {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .cert-info ul,
    .cert-column ul {
        display: inline-block;
        text-align: left;
    }
    .cert-info h4,
    .cert-column h4 {
        font-size: 1.6rem;
    }
    .cert-info li {
        justify-content: flex-start;
        font-size: 1.4rem;
    }
    .cert-column li {
        font-size: 1.4rem;
        text-align: left;
    }
    .cert-tags-list {
        justify-content: center;
    }
    .about-card .cert-tags-list li {
        font-size: 1.2rem;
        padding: 4px 12px;
    }
    .cert-footer {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin-top: 30px;
    }
    .cert-signature .sign-name {
        font-size: 2.2rem;
        padding: 0 20px 5px 20px;
    }
    .cert-seal {
        width: 70px;
        height: 70px;
    }
    .seal-inner {
        font-size: 0.9rem;
    }
}

/* ===== 680px 이하 ===== */
@media screen and (max-width: 680px) {
    .section {
        padding: 80px 0;
        height: auto;
        min-height: 0;
    }
    h2 {
        font-size: 4rem;
        line-height: 1.2;
    }
    h3 {
        font-size: 2.2rem;
    }
    h4 {
        font-size: 1.7rem;
    }
    .desc {
        font-size: 1.4rem;
        line-height: 1.5;
    }
    .about-grid,
    .contact-wrap {
        flex-direction: column;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    #contact.dawn-theme {
        min-height: auto;
        padding: 48px 0 150px;
        justify-content: flex-start;
    }

    #contact.dawn-theme .contact-content-front {
        padding-top: 34px;
    }

    #contact.dawn-theme .section-title {
        margin-bottom: 28px;
    }

    #contact.dawn-theme .contact-info {
        padding-right: 0;
    }

    #contact.dawn-theme .contact-info h3 {
        margin-bottom: 8px;
        font-size: 2.1rem;
    }

    #contact.dawn-theme .contact-info p {
        margin-bottom: 22px;
        font-size: 1.45rem;
        line-height: 1.55;
    }

    #contact.dawn-theme .contact-details {
        gap: 16px;
    }

    #contact.dawn-theme .contact-form {
        padding: 28px;
    }

    #contact.dawn-theme .form-group {
        margin-bottom: 14px;
    }

    #contact.dawn-theme .form-group input,
    #contact.dawn-theme .form-group textarea {
        padding: 11px 16px;
    }

    #contact.dawn-theme .form-group textarea {
        min-height: 100px;
    }

    #contact.dawn-theme .btn-primary {
        margin-top: 4px;
        padding: 13px 18px;
    }

    #contact.dawn-theme .contact-waves-container .waves {
        min-height: 80px;
        height: 10vh;
    }

    #contact.dawn-theme .anchored-boat {
        bottom: 44px;
        width: 96px;
        height: 96px;
        opacity: 0.72;
        z-index: 4;
    }

    #contact.dawn-theme .anchored-boat .boat-svg {
        width: 104px;
    }
    .about-img-wrap {
        order: -1;
    }
    .blueprint-grid,
    .work-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ===== 480px 이하 ===== */
@media screen and (max-width: 480px) {
    .section {
        padding: 70px 0;
        height: auto;
        min-height: 0;
    }

    #contact.dawn-theme {
        min-height: auto;
        padding: 38px 0 136px;
    }

    #contact.dawn-theme .contact-content-front {
        padding-top: 32px;
    }

    #contact.dawn-theme .section-title {
        margin-bottom: 22px;
    }

    #contact.dawn-theme .section-title h2 {
        font-size: 3.4rem;
    }

    #contact.dawn-theme .contact-wrap {
        gap: 20px;
    }

    #contact.dawn-theme .contact-info h3 {
        font-size: 2rem;
    }

    #contact.dawn-theme .contact-info p {
        margin-bottom: 18px;
        font-size: 1.38rem;
    }

    #contact.dawn-theme .contact-details {
        gap: 12px;
    }

    #contact.dawn-theme .detail-item {
        gap: 14px;
    }

    #contact.dawn-theme .detail-item span.contact-icon {
        width: 58px;
        height: 58px;
        font-size: 2.8rem;
    }

    #contact.dawn-theme .detail-item strong {
        font-size: 1.12rem;
    }

    #contact.dawn-theme .detail-item span {
        font-size: 1.45rem;
    }

    #contact.dawn-theme .contact-form {
        padding: 17px;
        border-radius: 16px;
    }

    #contact.dawn-theme .form-group {
        margin-bottom: 12px;
    }

    #contact.dawn-theme .form-group label {
        margin-bottom: 5px;
        font-size: 1.25rem;
    }

    #contact.dawn-theme .form-group input,
    #contact.dawn-theme .form-group textarea {
        padding: 4px 14px;
        border-radius: 10px;
        font-size: 1.3rem;
    }

    #contact.dawn-theme .form-group textarea {
        min-height: 86px;
    }

    #contact.dawn-theme .btn-primary {
        padding: 12px 16px;
        font-size: 1.4rem;
    }

    #contact.dawn-theme .anchored-boat {
        bottom: 40px;
        width: 88px;
        height: 88px;
        z-index: 4;
    }

    #contact.dawn-theme .anchored-boat .boat-svg {
        width: 96px;
    }
    h2 {
        font-size: 3.2rem;
        line-height: 1.2;
    }
    h3 {
        font-size: 2rem;
    }
    h4 {
        font-size: 1.6rem;
    }
}

/* Final HOME mobile proportions (loaded after the base stylesheet). */
@media screen and (max-width: 980px) {
    header {
        height: 82px;
        background: rgba(250, 255, 251, .92);
        border-bottom: 0;
    }
.mb-btn {
        display: block;
        top: 29px;
        right: 28px;
        width: 31px;
        height: 25px;
        opacity: 1;
        visibility: visible;
    }
    .mb-btn.active {
        top: 22px;
        right: 22px;
        width: 44px;
        height: 44px;
    }
    .mb-btn span { background-color: #111b1c; }
    main { margin-top: 0; }
    .hero-section.section { height: var(--app-height); min-height: 650px; }
    .hero-values-inner {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        width: 100%;
    }
    .hero-value { width: auto; min-width: 0; }
    .hero-value p { width: 100%; min-width: 0; }
}

@media screen and (max-width: 480px) {
    header { height: 72px; }
.mb-btn { top: 24px; right: 22px; width: 30px; }
    .mb-btn.active { top: 18px; right: 18px; width: 44px; height: 44px; }
    .hero-section.section { height: var(--app-height); }
}

@media screen and (max-width: 980px) {
    html {
        scroll-padding-top: 90px;
    }
    header nav {
        display: none;
    }
    .mb-btn {
        display: block;
        top: 29px;
    }
    .mb-btn.active {
        top: 22px;
        right: 22px;
        width: 44px;
        height: 44px;
    }
    header {
        height: 90px;
        background-color: rgba(238, 244, 232, 0.95);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid rgba(28, 43, 32, 0.08);
    }
    header .logo {
        flex: 0 0 auto;
        height: 100%;
    }
    header .logo a {
        overflow: hidden;
        justify-content: flex-start;
    }

main {
        margin-top: 90px;
    }
    .section,
    #about.about-section,
    .voyage-log-section,
    #contact.dawn-theme {
        scroll-margin-top: 90px;
    }
    #design-work {
        scroll-margin-top: 90px;
        min-height: calc(var(--app-height) - 90px);
    }

    .slogan-sub-poetic {
        font-size: 2.05rem;
        margin-bottom: 14px;
    }
    .slogan-title {
        margin-bottom: 18px;
    }
    .slogan-title .title-support {
        margin-bottom: 6px;
        font-size: 2.45rem;
    }
    .slogan-title .title-main {
        font-size: 2.92rem;
    }
    .slogan-role {
        font-size: 1.5rem;
        margin-bottom: 7px;
    }
    .slogan-name {
        font-size: 1.95rem;
        margin-bottom: 28px;
    }
    .hero-actions {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }
    .btn {
        width: 100%;
        max-width: 260px;
        padding: 11px 24px;
        text-align: center;
    }

    .waves {
        height: 12vh;
        min-height: 90px;
    }
    .boat-svg {
        width: 104px;
        opacity: 1;
        filter: drop-shadow(0 7px 10px rgba(18, 41, 51, 0.32));
    }
    .boat-wrapper {
        bottom: 64px;
        width: 104px;
        margin-left: -52px;
    }

    .hero-section.section {
        height: calc(var(--app-height) - 90px);
    }
}

@media screen and (max-width: 480px) {
    html {
        scroll-padding-top: 64px;
    }
    header {
        height: 64px;
    }
    .section,
    #about.about-section,
    .voyage-log-section,
    #contact.dawn-theme {
        scroll-margin-top: 64px;
    }
    #design-work {
        scroll-margin-top: 64px;
        min-height: calc(var(--app-height) - 64px);
    }
.mb-btn {
        top: 20px;
        right: 22px;
    }
    .mb-btn.active {
        top: 18px;
        right: 18px;
        width: 44px;
        height: 44px;
    }
    main {
        margin-top: 64px;
    }

    .hero-section.section {
        height: calc(var(--app-height) - 64px);
    }
    .slogan-sub-poetic {
        font-size: 1.72rem;
        margin-bottom: 12px;
    }
    .slogan-title {
        margin-bottom: 16px;
    }
    .slogan-title .title-support {
        margin-bottom: 6px;
        font-size: 1.98rem;
    }
    .slogan-title .title-main {
        font-size: 2.34rem;
        line-height: 1.36;
    }
    .slogan-name {
        font-size: 1.52rem;
        margin-bottom: 24px;
    }

    .container {
        padding: 0 15px;
    }
    .certificate-frame {
        padding: 8px;
        margin: 10px 0;
    }
    .certificate-paper {
        padding: 20px 15px;
        border-width: 3px;
    }
    .cert-title {
        font-size: 1.8rem;
        letter-spacing: 1px;
    }
    .cert-subtitle {
        font-size: 1.1rem;
        letter-spacing: 1px;
        margin-bottom: 15px;
    }
    .cert-philosophy p {
        font-size: 1.3rem;
    }
    .cert-photo {
        width: 100px;
        height: 100px;
    }
    .cert-column li {
        font-size: 1.3rem;
    }
    .cert-signature .sign-name {
        font-size: 1.8rem;
        padding: 0 10px 5px 10px;
    }
    .cert-seal {
        width: 60px;
        height: 60px;
    }
    .seal-inner {
        font-size: 0.8rem;
    }

    .blueprint-title-wrap h2 {
        font-size: 2rem;
    }
    .blueprint-title {
        font-size: 1.4rem;
    }
    .blueprint-card {
        padding: 15px;
    }
    .bp-info h4 {
        font-size: 1.5rem;
    }
    .bp-percent {
        font-size: 1.4rem;
    }
    .bp-details li {
        font-size: 1.2rem;
        flex-direction: column;
    }
    .bp-details li span {
        margin-bottom: 3px;
    }
}

/* ===== about-layout 반응형 ===== */
@media screen and (max-width: 980px) {
    .about-layout {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .about-skill-gallery {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        padding: 50px 16px 40px;
        gap: 24px;
    }
    .about-skill-gallery .polaroid-card {
        width: 200px;
    }
}

@media screen and (max-width: 680px) {
    .about-card-swiper .swiper-button-prev {
        left: 8px;
    }
    .about-card-swiper .swiper-button-next {
        right: 8px;
    }
    .about-skill-gallery {
        gap: 20px;
    }
    .about-skill-gallery .polaroid-card {
        width: 240px;
        transform: rotate(0deg);
    }
}

@media screen and (max-width: 400px) {
    .about-card-01 .ac-profile img {
        width: 60px;
        height: 60px;
    }
}

/* ===== about swiper responsive ===== */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
    .about-card-swiper .swiper-button-prev,
    .about-card-swiper .swiper-button-next {
        top: 50%;
        bottom: auto;
    }

    .about-card-swiper .swiper-button-prev {
        left: -16px;
    }

    .about-card-swiper .swiper-button-next {
        right: -54px;
    }
}

/* Responsive adjustments for mobile/tablet */
@media screen and (max-width: 1024px) {
    #about.about-section {
        height: auto;
        min-height: 0;
        margin-top: 0;
        padding-top: 90px;
        padding-bottom: 80px;
        display: block;
        overflow: visible;
    }
    #about.about-section .section-title {
        margin-bottom: 50px;
    }
    .about-layout {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        padding: 0 20px;
    }
    .about-card-swiper { 
        max-width: 600px;
    }
    .about-card {
        padding: 30px 50px 20px 60px;
    }
    .about-card-swiper .swiper-button-prev,
    .about-card-swiper .swiper-button-next {
        top: 50%;
        bottom: auto;
    }
    .about-card-swiper .swiper-button-prev { left: 10px; }
    .about-card-swiper .swiper-button-next { right: 10px; }
    
    .polaroid-container {
        position: static;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        width: 100%;
        height: auto;
    }
    .polaroid-container .polaroid-card { 
        position: static;
        margin: 0 auto;
        transform: rotate(0);
        width: 200px;
    }
    .deco-item {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    #about.about-section {
        padding-top: 56px;
        padding-bottom: 48px;
    }

    #about.about-section .container {
        width: 96%;
        padding-left: 0;
        padding-right: 0;
    }

    #about.about-section .section-title {
        margin-bottom: 12px;
    }
    .about-layout {
        width: 100%;
        padding: 0 8px;
        gap: 12px;
    }
    .about-card-swiper {
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
        padding-bottom: 26px;
    }
    .about-card-swiper .swiper-slide {
        width: 100%;
        min-width: 100%;
        -webkit-font-smoothing: antialiased;
        text-rendering: geometricPrecision;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    .about-card-swiper .swiper-slide-active {
        opacity: 1;
        filter: none;
    }
    .about-card-swiper .swiper-slide-active .about-card {
        transform: translateZ(0);
        will-change: transform;
    }
    .about-card-swiper .swiper-slide-active .about-card-02,
    .about-card-swiper .swiper-slide-active .about-card-03 {
        color: #0b4d54;
    }
    .about-card-03 {
        padding-top: 28px;
        padding-bottom: 24px;
    }
    .about-card-01 .ac-body {
        padding-top: 0;
    }
    .about-card-02 .ac-icon-list {
        padding-top: 0;
    }
    .about-card-03 .ac-top {
        min-height: 32px;
        margin-bottom: 28px;
    }
    .about-card-03 .ac-ps-section {
        margin-bottom: 28px;
    }
    .about-card-03 .ac-ps-section h4 {
        margin-bottom: 0;
    }
    .about-card-03 .ac-ps-section ul {
        gap: 0;
    }
    .about-card-03 .ac-tags {
        gap: 0 7px;
        height: 64px;
    }
    .about-card {
        width: 100%;
        min-height: 520px;
        padding: 24px 18px 18px 34px;
        font-size: 1.45rem;
    }
    .about-card-01 .ac-profile img {
        bottom: 28px;
    }
    .about-card .ac-num {
        font-size: 2.8rem;
    }
    .about-card .ac-en {
        font-size: 1.25rem;
        letter-spacing: 0.5px;
    }
    .about-card .ac-title {
        min-height: 58px;
        font-size: 2.15rem;
    }
    .about-card .ac-body p {
        font-size: 1.45rem;
    }
    .about-card .ac-book,
    .about-card .ac-italic {
        font-size: 1.25rem;
    }
    .about-card-swiper .swiper-pagination {
        bottom: 6px;
    }
    .about-card-swiper .swiper-button-prev {
        display: none;
    }
    .about-card-swiper .swiper-button-next {
        display: flex;
    }
    .polaroid-container {
        flex-direction: column;
        align-items: center;
    }
    .polaroid-container .polaroid-card {
        width: 100%;
        max-width: 280px;
    }
    .about-swiper-gesture-helper {
        display: flex;
    }
}

@media screen and (max-width: 400px) {
    #about.about-section {
        margin-top: 0;
        padding-top: 52px;
        padding-bottom: 44px;
    }
    #about.about-section .section-title {
        margin-bottom: 10px;
    }
    .about-card-swiper {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        padding-bottom: 26px;
    }
    .about-card-swiper .swiper-slide {
        width: 100%;
        min-width: 100%;
    }
    .about-card {
        width: 100%;
        min-height: 500px;
        padding: 21px 12px 15px 24px;
        font-size: 1.35rem;
    }
    .about-card-01 .ac-profile img {
        bottom: 22px;
    }
    .about-card .ac-num {
        font-size: 2.6rem;
    }
    .about-card .ac-en {
        font-size: 1.15rem;
    }
    .about-card .ac-title {
        min-height: 56px;
        font-size: 2rem;
    }
    .about-card .ac-body p {
        font-size: 1.35rem;
    }
    .about-card .ac-book,
    .about-card .ac-italic {
        font-size: 1.2rem;
    }
    .about-card-swiper .swiper-button-next {
        display: none;
    }
}

/* 모바일 메뉴 이동 시 현재 섹션만 화면에 차도록 보정 */
@media screen and (max-width: 980px) {
    .section,
    #about.about-section,
    .voyage-log-section {
        min-height: calc(var(--app-height) - 90px);
    }
}

@media screen and (max-width: 480px) {
    .section,
    #about.about-section,
    .voyage-log-section {
        min-height: calc(var(--app-height) - 64px);
    }
}

/* Keep primary section title spacing consistent across responsive views. */
@media screen and (max-width: 1024px) {
    #about.about-section .section-title,
    #design-work .section-title,
    #contact.dawn-theme .section-title {
        margin-bottom: 40px;
        padding: 0;
    }
}

@media screen and (max-width: 768px) {
    #about.about-section .section-title,
    #design-work .section-title,
    #contact.dawn-theme .section-title {
        margin-bottom: 28px;
        padding: 0;
    }
}

@media screen and (max-width: 480px) {
    #about.about-section .section-title,
    #design-work .section-title,
    #contact.dawn-theme .section-title {
        margin-bottom: 22px;
        padding: 0;
    }
}

/* Home poster typography scale */
@media screen and (max-width: 1280px) {
    .hero-compass {
        width: min(470px, 70vw);
    }
    .compass-point {
        border-left-width: 8px;
        border-right-width: 8px;
        border-bottom-width: 96px;
    }
    .hero-route {
        height: clamp(88px, 13vh, 130px);
    }
    .slogan-sub-poetic {
        font-size: 2rem;
    }
    .slogan-title .title-support {
        font-size: 3.1rem;
    }
    .slogan-title .title-main {
        font-size: 5.8rem;
    }
    .slogan-role {
        font-size: 1.35rem;
        padding: 10px 44px 8px;
    }
    .slogan-name {
        font-size: 2rem;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 980px) {
    .hero-text-wrap {
        max-width: 680px;
        padding-top: 18px;
    }
    .hero-compass {
        top: 45%;
        width: min(410px, 74vw);
    }
    .compass-ring-outer {
        box-shadow: inset 0 0 0 18px rgba(255, 255, 255, 0.08), 0 14px 34px rgba(35, 87, 79, 0.07);
    }
    .compass-point {
        border-left-width: 7px;
        border-right-width: 7px;
        border-bottom-width: 78px;
    }
    .hero-route {
        top: calc(100% + 2px);
        height: clamp(66px, 10vh, 92px);
    }
    .slogan-sub-poetic {
        font-size: 1.75rem;
    }
    .slogan-title .title-support {
        font-size: 2.45rem;
    }
    .slogan-title .title-main {
        font-size: 4.25rem;
    }
    .slogan-role {
        width: min(92%, 520px);
        padding: 10px 18px 8px;
        font-size: 1.22rem;
        letter-spacing: 0.12em;
    }
    .slogan-name {
        font-size: 1.82rem;
        margin-bottom: 26px;
    }
}

@media screen and (max-width: 480px) {
    .hero-text-wrap {
        padding: 4px 8px 0;
    }
    .hero-compass {
        top: 43%;
        width: min(310px, 88vw);
    }
    .compass-ring-inner {
        inset: 16%;
    }
    .compass-point {
        border-left-width: 5px;
        border-right-width: 5px;
        border-bottom-width: 54px;
    }
    .hero-route {
        top: calc(100% - 2px);
        height: 58px;
    }
    .hero-slogan-intro {
        margin-bottom: 8px;
    }
    .hero-slogan-main {
        margin-bottom: 18px;
    }
    .slogan-sub-poetic {
        font-size: 1.62rem;
    }
    .slogan-title .title-support {
        font-size: 1.85rem;
    }
    .slogan-title .title-main {
        font-size: 2.65rem;
        line-height: 1.18;
    }
    .slogan-title .highlight::after {
        bottom: 0;
        height: 9px;
    }
    .slogan-role {
        font-size: 1.02rem;
        letter-spacing: 0.08em;
        padding: 8px 10px 7px;
    }
    .slogan-name {
        font-size: 1.55rem;
        margin-bottom: 22px;
    }
}

/* HOME final cascade */
@media screen and (max-width: 980px) {
    header,
    header.scrolled { height: 82px; background: #fffef8; border-bottom: 0; }
.mb-btn { display:block; top:29px; right:28px; width:31px; height:25px; }
    .mb-btn.active { top:22px; right:22px; width:44px; height:44px; }
    .mb-btn span { background-color:#111b1c; }
    main { margin-top:0; }
    .hero-section.section { height:var(--app-height); min-height:650px; }
    .hero-text-wrap { max-width:none; padding-top:0; }
    .hero-compass { top:50%; width:min(430px,85vw); }
    .hero-values-inner { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; width:100%; }
    .hero-value, .hero-value p { width:auto; min-width:0; }
    .hero-section,
    .hero-sky-area,
    .hero-container,
    .hero-text-wrap,
    .hero-typo-stage {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .hero-values-inner {
        width: 100%;
        max-width: 100%;
    }
    .hero-values { left:auto; width:100%; transform:none; }
}

@media screen and (max-width: 480px) {
    header,
    header.scrolled { height:72px; background:#fffef8; }
.mb-btn { top:24px; right:22px; width:30px; }
    .mb-btn.active { top:18px; right:18px; width:44px; height:44px; }
    .hero-section.section { height:var(--app-height); }
    .hero-text-wrap { padding:0; }
    .hero-compass { top:47%; width:min(360px,93vw); }
    .hero-main-title { font-size: 3.35rem; }
}

/* Compact desktop/tablet bridge: prevent a sudden jump at 980px. */
@media screen and (min-width: 981px) and (max-width: 1180px) {
    header .container { padding-left:32px; padding-right:32px; }
header nav ul { gap:24px; }
    .hero-text-wrap { max-width:900px; }
    .hero-values-inner { gap:24px; padding-left:28px; padding-right:28px; }
    .hero-value { flex:1 1 0; min-width:0; justify-content:center; }
    .hero-value strong { font-size:1.35rem; }
    .hero-value small { font-size:1.15rem; }
}

/* Mobile HOME title: PARK / MINJU */
@media screen and (max-width: 600px) {
    .hero-main-title {
        display: block;
        width: 92%;
        max-width: 440px;
        margin: 0 auto 42px;
        font-size: clamp(4.2rem, 13vw, 5.4rem);
        line-height: .88;
        letter-spacing: -.065em;
    }
    .hero-main-title .space {
        display: block;
        width: 100%;
        height: .1em;
    }
}

/* HOME title lockup: The way follows the title instead of the viewport. */
@media screen and (min-width: 981px) and (max-width: 1180px) {
    .hero-cloud-left { left:-28px; top:22%; transform:scale(.76); transform-origin:left center; }
    .hero-cloud-right { right:-26px; top:19%; transform:scale(.70); transform-origin:right center; }
    .hero-birds-left { left:20%; top:21%; transform:scale(.9); }
    .hero-birds-right { right:15%; top:19%; transform:scale(.9); }
}

@media screen and (min-width: 601px) and (max-width: 980px) {
    .hero-title-lockup { max-width:88%; margin-bottom: 40px; }
    .hero-title-lockup .hero-handwriting {
        left: calc(100% - 10px);
        top: 62%;
        font-size: clamp(3.2rem, 4.8vw, 4.2rem);
    }
}

@media screen and (max-width: 600px) {
    .hero-title-lockup { max-width:88%; margin-bottom: 35px; }
    .hero-title-lockup .hero-main-title { width:auto; }
    .hero-title-lockup .hero-handwriting {
        left: calc(100% - 10px);
        top: 100%;
        font-size: 2.8rem;
    }
}

@media screen and (max-width: 980px) {
    .hero-cloud-left {
        left: -34px;
        top: 24%;
        transform: scale(.62);
        transform-origin: left center;
    }
    .hero-cloud-right {
        right: -32px;
        top: 16%;
        transform: scale(.60);
        transform-origin: right center;
    }
    .hero-birds-left {
        left: 18%;
        top: 20%;
        transform: scale(.85);
    }
    .hero-birds-right {
        right: 14%;
        top: 18%;
        transform: scale(.85);
    }
}

@media screen and (max-width: 600px) {
    .hero-cloud-left {
        left: -42px;
        top: 25%;
        transform: scale(.52);
    }
    .hero-cloud-right {
        right: -40px;
        top: 14%;
        transform: scale(.52);
    }
    .hero-birds-left {
        left: 20%;
        top: 18%;
        transform: scale(.72);
    }
    .hero-birds-right {
        right: 12%;
        top: 15%;
        transform: scale(.72);
    }
}

@media screen and (max-width: 980px) {
    .modal-content {
        width: 90%;
    }
    .modal-close {
        top: 20px;
        right: 8%;
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 600px) {
    .modal-content {
        width: 100%;
    }
    .modal-close {
        top: 15px;
        right: 15px;
        font-size: 2rem;
    }
}

/* ====== mobile-menu 영역 ====== */
@media screen and (max-width: 980px) {
    /* 햄버거 버튼 (메뉴 닫힌 상태) */
    .mb-btn {
        display: block;
        position: fixed;
        top: 29px;
        right: 28px;
        z-index: 1002;
        width: 31px;
        height: 25px;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: top 0.3s ease, opacity 0.3s ease;
    }

    .mb-btn.header-hidden {
        top: -80px;
        opacity: 0;
        pointer-events: none;
    }

    /* X 버튼 (메뉴 열린 상태) */
    .mb-btn.active {
        top: 22px;
        right: 22px;
        width: 44px;
        height: 44px;
        border: 1.5px solid rgba(23, 70, 100, .15);
        border-radius: 50%;
        background: rgba(255, 254, 248, .88);
        box-shadow: 0 4px 16px rgba(23, 70, 100, .12);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    /* X 상태 스팬 - style.css에서 전역 정의됨, 여기선 위치/크기만 보정 */
}

@media screen and (max-width: 480px) {
    .mb-btn {
        top: 24px;
        right: 20px;
    }
    .mb-btn.active {
        top: 18px;
        right: 18px;
    }
}

/* ====== header logo 영역 ====== */
@media screen and (min-width: 981px) and (max-width: 1180px) {
    header .logo a,
    header .logo img {
        width: 205px;
    }
}

@media screen and (max-width: 980px) {
    header .logo a {
        width: 160px;
        height: 78px;
    }
    header .logo img {
        width: 160px;
    }
}

@media screen and (max-width: 600px) {
    header .logo a {
        width: 140px;
        height: 74px;
    }
    header .logo img {
        width: 140px;
    }
}

@media screen and (max-width: 480px) {
    header .logo a {
        width: 120px;
        height: 60px;
    }
    header .logo img {
        width: 120px;
    }
}

/* ====== 접근성: 모션 감소 ====== */
@media screen and (prefers-reduced-motion: reduce) {
    .compass-anchor,
    .compass-needle,
    .hero-outline-track,
    .hero-job,
    .hero-main-title span,
    .hero-main-title::before,
    .hero-main-title::after,
    .hero-copy-block .copy-line,
    .guide-highlight::after,
    .hero-role-new,
    .hero-cloud,
    .hero-birds,
    .hero-birds i,
    .mb-sun-halo,
    .mb-sailboat,
    .mb-sun-svg,
    .mb-light-particles i {
        animation: none;
    }

    .hero-outline-track,
    .hero-job,
    .hero-main-title span,
    .hero-main-title::before,
    .hero-main-title::after,
    .hero-copy-block .copy-line,
    .guide-highlight::after,
    .hero-role-new {
        opacity: 1;
        transform: none;
        filter: none;
    }

    .mb-nav,
    .mb-nav::before,
    .mb-voyage-header,
    .mb-nav .mb-menu li,
    .mb-nav-footer {
        transition-duration: 0.01ms;
        transition-delay: 0s;
    }
}
/* ====== Appended & Unified Responsive Rules ====== */

@media screen and (max-width: 1280px) {
    .project-modal-header {
        padding: 0 20px;
    }
    .project-modal-type {
        font-size: 1.2rem;
    }
    .project-modal-title {
        font-size: 1.6rem;
    }
    .project-modal-header .header-left {
        gap: 0;
    }
}

@media screen and (max-width: 1024px) {
    #contact.dawn-theme .detail-item span.contact-icon {
        font-size: 2.6rem;
        width: 60px;
        height: 60px;
    }
    .hero-job {
        letter-spacing: 6.5px;
    }
}

@media screen and (max-width: 980px) {
    .project-epilogue {
        padding: 25px 20px;
        margin-top: 30px;
    }
    .epilogue-badge {
        left: 20px;
        font-size: 1rem;
        top: -12px;
    }
    .epilogue-content {
        font-size: 1.3rem;
    }
    .hero-job {
        margin-bottom: 12px;
        letter-spacing: 6px;
    }
    .project-modal-wrapper {
        width: 100%;
        height: 100vh;
        max-width: none;
        border-radius: 0;
        border: none;
    }
    .project-modal-header {
        padding: 0 20px;
        height: 65px;
    }
    .project-modal-header .header-center {
        display: none;
    }
    .project-modal-type {
        gap: 8px;
    }
    .project-modal-type .proj-category-badge {
        font-size: 1rem;
        padding: 4px 10px;
    }
    .project-modal-type .modal-project-number {
        font-size: 1.2rem;
    }
    .btn-modal-close {
        width: 40px;
        height: 40px;
        font-size: 2.2rem;
    }
    .project-modal-body {
        padding: 15px;
    }
}

@media screen and (max-width: 768px) {
    #contact.dawn-theme .detail-item span.contact-icon {
        font-size: 2.2rem;
        width: 52px;
        height: 52px;
    }
    .hero-job {
        margin-bottom: 10px;
        letter-spacing: 5px;
    }
    .project-modal-header {
        height: auto;
        padding: 15px 20px;
        align-items: flex-start;
    }
    .project-modal-header .header-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
    .project-modal-type {
        font-size: 1rem;
    }
    .project-modal-title {
        font-size: clamp(1.2rem, 3.5vw, 1.5rem);
        line-height: 1.3;
        white-space: nowrap;
    }
    .btn-modal-close {
        width: 36px;
        height: 36px;
        font-size: 2rem;
    }
}

@media screen and (max-width: 480px) {
    #contact.dawn-theme .detail-item span.contact-icon {
        font-size: 1.8rem;
        width: 44px;
        height: 44px;
    }
    .hero-job {
        margin-bottom: 8px;
        letter-spacing: 4px;
    }
    .mini-wheel-wrap .stamp-wrapper {
        top: 6px;
        right: 6px;
        transform: scale(0.55) rotate(5deg);
    }
    .mini-wheel-wrap article .polaroid-caption {
        margin-top: 5px;
    }
    .mini-wheel-wrap article .polaroid-caption h3 {
        font-size: 1.8rem;
        padding-bottom: 1px;
    }
    .mini-wheel-wrap article .polaroid-caption .desc {
        font-size: 1.5rem;
    }
    .wheel-bottom-info .info-title {
        font-size: 1.6rem;
    }
    .project-modal-header {
        padding: 12px 15px;
    }
    .project-modal-header .header-left {
        padding-right: 10px;
    }
    .project-modal-type {
        font-size: 0.85rem;
    }
    .project-modal-title {
        font-size: clamp(1rem, 3.5vw, 1.25rem);
        line-height: 1.4;
        white-space: nowrap;
    }
    .btn-modal-close {
        width: 32px;
        height: 32px;
        font-size: 1.8rem;
    }
    .about-card-03 .ac-profile-large {
        position: relative;
        bottom: auto;
        right: auto;
        text-align: right;
        margin-top: 30px;
        margin-bottom: 10px;
    }
}



@media screen and (max-width: 768px) {
    :root {
        --dw-card-size: clamp(220px, 52vw, 280px);
        --dw-card-half: clamp(110px, 26vw, 140px);
        --dw-card-img-height: clamp(138px, 33vw, 178px);
    }
    #design-work {
        padding-top: 96px;
    }
    .mini-wheel-wrap {
        height: 470px;
    }
    .mini-wheel-wrap .btnPrev,
    .mini-wheel-wrap .btnNext {
        top: 36%;
        width: 42px;
        height: 42px;
    }
    .mini-wheel-wrap .btnPrev {
        left: max(10px, calc(50% - var(--dw-card-half) - 62px));
    }
    .mini-wheel-wrap .btnNext {
        right: max(10px, calc(50% - var(--dw-card-half) - 62px));
    }
    .wheel-bottom-info {
        margin-top: -118px;
        padding: 0 20px 28px;
    }
    .wheel-bottom-info .info-title {
        font-size: 1.9rem;
        line-height: 1.2;
    }
    .wheel-bottom-info .info-desc {
        max-width: 340px;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --dw-card-size: clamp(214px, 62vw, 238px);
        --dw-card-half: clamp(107px, 31vw, 119px);
        --dw-card-img-height: clamp(134px, 39vw, 150px);
    }
    #design-work {
        padding-top: 88px;
    }
    .mini-wheel-wrap {
        height: 400px;
    }
    .mini-wheel-wrap .btnPrev,
    .mini-wheel-wrap .btnNext {
        top: 40%;
        width: 40px;
        height: 40px;
    }
    .mini-wheel-wrap .btnPrev {
        left: max(10px, calc(50% - var(--dw-card-half) - 60px));
    }
    .mini-wheel-wrap .btnNext {
        right: max(10px, calc(50% - var(--dw-card-half) - 60px));
    }
    .wheel-bottom-info {
        margin-top: -68px;
        padding: 0 16px 24px;
    }
    .wheel-bottom-info .info-title {
        font-size: 1.55rem;
    }
}

@media screen and (max-width: 980px) {
    .voyage-title-area {
        margin-top: 15px;
        margin-bottom: 10px;
        padding: 10px 15px 5px 15px;
    }
    .voyage-title-area .sub-title-vintage,
    .voyage-title-area p {
        display: none !important;
    }
    .voyage-title-area h2 {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
}

@media screen and (max-width: 1100px) {
    /* Make the project thumbnail image slightly bigger, but not too huge */
    .proj-thumb {
        max-height: 260px !important;
    }
    
    /* Make the action buttons much smaller and fit on one line */
    .proj-actions {
        gap: 4px !important;
        flex-wrap: nowrap !important;
    }
    .btn-vintage-link {
        flex: 1 1 0 !important;
        min-height: 38px !important;
        padding: 0 2px !important;
        font-size: 1.3rem !important;
    }
}