/* ================================
   auditionme.css
   경로: /portfolio/css/auditionme.css
   기본 구조: yoochangenc.css 패턴 기반
   오디션미 디자인 적용 (am- prefix)
   ================================ */

/* ─── CSS 변수 ─── */
:root {
    --am-lime: #e5ff77;
    --am-lime-dark: #c1ef00;
    --am-dark: #111214;
    --am-dark2: #1a1d22;
    --am-gray: #2c2c2c;
    --am-white: #ffffff;
    --am-text-muted: rgba(255, 255, 255, 0.65);
}

figure {
    width: fit-content;
    height: fit-content;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    font-family: 'Pretendard Variable' !important;

}

/* ─── 공통 ─── */
img {
    max-width: unset;
    width: 100%;
}

.am-inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}


/* ================================================
   sect1 — COVER (히어로)
   ================================================ */

.am-sect1 {
    position: relative;
    width: 100%;
    min-height: 1080px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--am-lime) url("/resources/images/auditionme/sect1_bg.png") no-repeat center;
}

/* 배경 워터마크 로고 */
.am-bg-logo {
    position: absolute;
    top: -47px;
    left: -81px;
    width: 2083px;
    max-width: none;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

.am-bg-logo img {
    width: 100%;
    height: auto;
}

/* 헤더 */
.am-cover-header {
    position: relative;
    z-index: 20; /* 10 → 20으로 높임 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-top: 64px;
}

.am-logo img {
    height: 50px;
    width: auto;
}

.am-cover-subtitle {
    font-family: 'SUIT Variable', 'Pretendard Variable', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--am-gray);
    letter-spacing: -0.3px;
    white-space: nowrap;
}

/* 커버 콘텐츠 */
.am-cover-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1920px;
    height: 900px;
    margin: 0 auto;
}

/* 아이폰 목업 */
.am-phone {
    position: absolute;
    bottom: 0;
    pointer-events: none;
}

.am-phone img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.am-phone-back {
    left: 37.14%;
    width: 42%;
    z-index: 2;
    bottom: 0;
}

.am-phone-front {
    left: 20.89%;
    width: 44.63%;
    z-index: 3;
    bottom: 0;
}


/* 배너 카드 */
.am-banner {
    position: absolute;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    z-index: 4;
}

.am-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 28px;
    display: block;
}

.am-banner-left {
    left: 20.3%;
    top: 392px;
    width: 345px;
    height: 332px;
    z-index: 1; /* 폰(2,3)보다 낮게 */
    box-shadow: 0 11px 12px rgba(0, 0, 0, 0.2);
}

.am-banner-right {
    left: 60.7%;
    top: 543px;
    width: 345px;
    height: 332px;
    z-index: 1;
    box-shadow: 0 11px 12px rgba(0, 0, 0, 0.2);
}

.am-banner-btns {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    white-space: nowrap;
}

.am-btn-apply {
    background: var(--am-lime);
    color: #212223;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 16px;
    font-weight: 800;
    padding: 10px 16px;
    border-radius: 32px;
    letter-spacing: -0.16px;
    line-height: 1.4;
    border: none;
    cursor: pointer;
}

.am-btn-details {
    background: rgba(0, 0, 0, 0.4);
    color: var(--am-white);
    font-family: 'SUIT Variable', sans-serif;
    font-size: 16px;
    font-weight: 800;
    padding: 10px 16px;
    border-radius: 32px;
    letter-spacing: -0.16px;
    line-height: 1.4;
    border: none;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* 이모지 장식 */
.am-cover-emoji {
    position: absolute;
    left: 17%;
    top: 36%;
    z-index: 6;
    width: 122px;
    pointer-events: none;
}

.am-cover-emoji img {
    width: 100%;
    height: auto;
}

/* 초록 엄지 벡터 — inset: 27.78% 74.18% 65.46% 22.4% */
.am-cover-thumb {
    position: absolute;
    left: 22.4%;
    top: 19.78%;
    right: 74.18%;
    bottom: 65.46%;
    z-index: 6;
    pointer-events: none;
    transform: rotate(-17.14deg);
}

.am-cover-thumb img {
    width: 100%;
    height: auto;
}

/* 핑크 하트 — inset: 34.81% 69.78% 57.38% 25.83% */
.am-cover-hearts {
    position: absolute;
    left: 25.83%;
    top: 27.81%;
    right: 69.78%;
    bottom: 57.38%;
    z-index: 6;
    pointer-events: none;
    transform: rotate(19.59deg);
}

.am-cover-hearts img {
    width: 100%;
    height: auto;
}

/* 평가 라벨 */
.am-score-labels {
    position: absolute;
    right: 20%;
    top: 28%;
    z-index: 6;
    pointer-events: none;
    width: 378px;
}

.am-score-labels img {
    width: 100%;
    height: auto;
}

/* ================================================
   sect2 — Background & Index
   (다크 배경 / yoochangenc sect2 패턴 동일)
   ================================================ */

/*.am-sect2 {*/
/*    background-color: var(--am-dark);*/
/*    color: var(--am-white);*/
/*}*/
.am-sect2 .am-inner {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.am-sect2-bg-row {
    padding-top: 120px;
    padding-bottom: 100px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.am-sect2-index-row {
    padding-top: 80px;
    padding-bottom: 120px;
}

.am-sect2-label {
    min-width: 160px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    padding-top: 8px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.am-sect2-content {
    flex: 1;
}

.am-sect2-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 130%;
    margin-bottom: 32px;
    color: var(--am-white);
}

.am-sect2-desc {
    font-size: 18px;
    font-weight: 400;
    line-height: 170%;
    color: var(--am-text-muted);
    margin-bottom: 20px;
}

.am-sect2-desc:last-child {
    margin-bottom: 0;
}

/* 인덱스 */
.am-sect2-index-content {
    flex: 1;
    display: flex;
    gap: 80px;
}

.am-sect2-index-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    list-style: none;
}

.am-sect2-index-col li {
    font-size: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 12px;
}

.am-idx-num {
    color: rgba(255, 255, 255, 0.35);
    font-size: 14px;
    font-weight: 400;
    min-width: 28px;
}

/* 라임 포인트 */
.am-idx-num.accent {
    color: var(--am-lime);
}


/* ================================================
   sect3 — Problems & Solutions
   ================================================ */

.am-sect3 {
    background-color: var(--am-white);
    padding: 140px 0 120px;
}

.am-sect3 .am-inner {
    display: block;
}

.am-sect3-head {
    text-align: center;
    margin-bottom: 80px;
}

.am-sect3-title {
    font-size: 40px;
    font-weight: 700;
    color: #111;
    margin-bottom: 32px;
    line-height: 130%;
}

.am-sect3-desc {
    font-size: 16px;
    color: #444;
    line-height: 180%;
    margin-bottom: 20px;
}

.am-sect3-sub {
    font-size: 15px;
    color: #666;
    line-height: 170%;
    margin-bottom: 48px;
}

.am-sect3-divider {
    width: 32px;
    height: 3px;
    background-color: var(--am-lime-dark);
    margin: 0 auto;
    border-radius: 2px;
}

/* 컬럼 라벨 */
.am-sect3-columns {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ddd;
}

.am-col-label {
    font-size: 13px;
    font-weight: 700;
    color: #999;
    letter-spacing: 0.08em;
    flex: 1;
}

.am-col-label:last-child {
    text-align: left;
    padding-left: 20px;
}

.am-col-spacer {
    width: 60px;
    flex-shrink: 0;
}

/* 리스트 */
.am-sect3-list {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.am-sect3-item {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 40px 0;
    border-bottom: 1px solid #eee;
}

.am-asis {
    flex: 1;
    padding-right: 20px;
}

.am-asis .am-item-num {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #bbb;
    margin-bottom: 10px;
    letter-spacing: 0.04em;
}

.am-asis strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
    line-height: 140%;
}

.am-asis p {
    font-size: 14px;
    color: #777;
    line-height: 170%;
}

.am-arrow-wrap {
    width: 60px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.am-arrow-icon {
    font-size: 20px;
    color: #ccc;
    display: block;
}

.am-arrow-icon.active {
    color: var(--am-lime-dark);
    font-size: 22px;
}

.am-tobe {
    flex: 1;
    padding-left: 20px;
}

.am-tobe strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
    line-height: 140%;
}

.am-tobe p {
    font-size: 14px;
    color: #555;
    line-height: 170%;
}


/* ================================================
   sect4 — UI Design Concept
   ================================================ */

.am-sect4 {
    height: auto;
    padding: 0;
}

.am-sect4-top {
    background-color: var(--am-white);
    padding: 80px 0 100px;
}

.am-sect4-top .am-inner {
    display: block;
}

.am-sect4-title {
    font-size: 36px;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
    line-height: 130%;
}

.am-sect4-desc {
    font-size: 16px;
    color: #555;
    line-height: 170%;
}

/* 다크 영역 */
.am-sect4-dark {
    background-color: var(--am-dark);
    padding: 80px 0 100px;
}

.am-sect4-dark .am-inner {
    display: block;
}

/* 카드 */
.am-sect4-cards {
    display: flex;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.am-sect4-card {
    flex: 1;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.am-sect4-card:last-child {
    border-right: none;
}

/* 카드 그래픽 — 라임 포인트 컬러 적용 */
.am-card-graphic {
    width: 120px;
    height: 120px;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.am-diamond {
    width: 80px;
    height: 80px;
    border: 1px solid rgba(229, 255, 119, 0.4);
    transform: rotate(45deg);
    position: relative;
}

.am-diamond::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(229, 255, 119, 0.2);
}

.am-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 1px solid rgba(229, 255, 119, 0.4);
    position: relative;
}

.am-circle::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 1px solid rgba(229, 255, 119, 0.2);
}

.am-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(229, 255, 119, 0.2);
}

.am-card-keyword {
    font-size: 32px;
    font-weight: 700;
    color: var(--am-lime);
    line-height: 130%;
    margin-bottom: 8px;
    font-family: 'Montserrat', sans-serif;
}

.am-card-keyword-ko {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 24px;
    display: block;
}

.am-card-desc {
    font-size: 14px;
    color: var(--am-text-muted);
    line-height: 170%;
}

/* Project Goal */
.am-sect4-goal {
    display: flex;
    gap: 80px;
    align-items: flex-start;
    margin-top: 80px;
    padding-top: 80px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.am-goal-label {
    min-width: 160px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    padding-top: 6px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.am-goal-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--am-lime);
    margin-bottom: 20px;
    line-height: 130%;
    font-family: 'Montserrat', sans-serif;
}

.am-goal-desc {
    font-size: 15px;
    color: var(--am-text-muted);
    line-height: 180%;
}


/* ================================================
   sect5 — Style Guide
   ================================================ */

.am-sect5 {
    background-color: var(--am-white);
    padding: 80px 0 0;
    width: 100%;
    overflow: hidden;
}

.am-sect5 .am-inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

.am-sect5-top {
    margin-bottom: 60px;
    padding: 0 60px;
}

.am-sect5-title {
    font-size: 28px;
    font-weight: 700;
    color: #111;
    margin-bottom: 12px;
    line-height: 130%;
}

.am-sect5-desc {
    font-size: 14px;
    color: #666;
    line-height: 170%;
}

.am-sect5-content {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 700px;
    position: relative;
}

.am-sect5-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 920px;
    width: 1px;
    height: 100%;
    background-color: #e0e0e0;
    z-index: 1;
}

.am-style-left {
    width: 920px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 60px 80px;
    align-self: flex-start;
    box-sizing: border-box;
}

.am-color-swatch {
    width: 200px;
    height: 160px;
    border-radius: 8px;
    display: flex;
    align-items: flex-end;
    padding: 12px 14px;
    box-sizing: border-box;
}

.am-color-swatch span {
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.02em;
}

.am-color-swatch.white-text span {
    color: rgba(255, 255, 255, 0.9);
}

.am-style-center {
    position: absolute;
    left: 920px;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.am-style-phone-img {
    width: 260px;
    height: auto;
    display: block;
}

.am-style-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    text-align: right;
    padding: 40px 60px 60px;
    box-sizing: border-box;
}

.am-typo-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.am-typo-ko {
    font-size: 72px;
    font-weight: 900;
    color: #111;
    line-height: 115%;
    font-family: 'SUIT Variable', sans-serif;
}

.am-typo-en-bold {
    font-size: 60px;
    font-weight: 800;
    color: #333;
    line-height: 115%;
    font-family: 'Montserrat', sans-serif;
}

.am-typo-ko-sub {
    font-size: 60px;
    font-weight: 400;
    color: #bbb;
    line-height: 130%;
    font-family: 'Pretendard Variable', sans-serif;
}

.am-typo-en-sub {
    font-size: 52px;
    font-weight: 400;
    color: #ddd;
    line-height: 130%;
    font-family: 'Montserrat', sans-serif;
}

.am-sub-colors {
    display: flex;
    gap: 16px;
    align-self: flex-end;
}

.am-sub-swatch {
    width: 140px;
    height: 120px;
    border-radius: 8px;
    display: flex;
    align-items: flex-end;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.am-sub-swatch span {
    font-size: 11px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
}


/* ================================================
   sect6 — IA Structure
   ================================================ */

.am-sect6 {
    background: var(--am-dark) url('/resources/images/auditionme/ia_bg.png') no-repeat center / cover;
    padding: 80px 0 100px;
    width: 100%;
    position: relative;
}

.am-sect6::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.am-sect6 .am-inner {
    max-width: 1400px;
    display: block;
    position: relative;
    z-index: 1;
}

.am-sect6-head {
    text-align: center;
    margin-bottom: 60px;
}

.am-sect6-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--am-lime);
    margin-bottom: 16px;
    line-height: 130%;
}

.am-sect6-desc {
    font-size: 15px;
    color: var(--am-text-muted);
    line-height: 170%;
}

/* IA 트리 */
.am-ia-tree {
    width: 100%;
    overflow-x: auto;
}

.am-ia-depth1 {
    display: flex;
    align-items: flex-start;
    gap: 0;
    list-style: none;
    width: 100%;
    position: relative;
}

.am-ia-depth1 > li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.am-ia-depth1 > li.am-ia-home {
    flex: 0.6;
}

.am-ia-depth1 > li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 22px;
    right: 0;
    width: 50%;
    height: 1px;
    background-color: rgba(229, 255, 119, 0.3);
}

.am-ia-depth1 > li:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 0;
    width: 50%;
    height: 1px;
    background-color: rgba(229, 255, 119, 0.3);
}

.am-ia-depth1 > li.am-ia-home::before {
    display: none;
}

.am-ia-node {
    border: 1px solid rgba(229, 255, 119, 0.3);
    background: rgba(255, 255, 255, 0.05);
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    padding: 10px 20px;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    min-width: 80px;
    text-align: center;
}

.am-ia-node.home {
    border-color: var(--am-lime);
    color: var(--am-lime);
}

.am-ia-node.active {
    border-color: rgba(229, 255, 119, 0.6);
    color: var(--am-lime);
}

.am-ia-depth1 > li:not(.am-ia-home) .am-ia-node::after {
    content: '';
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 28px;
    background-color: rgba(229, 255, 119, 0.3);
}

.am-ia-depth2 {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    width: 100%;
}

.am-ia-depth2 li {
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
    white-space: nowrap;
}

.am-ia-depth2.family {
    gap: 12px;
}

.am-ia-tag {
    border: 1px solid rgba(229, 255, 119, 0.25);
    background: rgba(255, 255, 255, 0.04);
    font-size: 13px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 8px 16px;
    white-space: nowrap;
    width: fit-content;
}


/* ================================================
   sect7 — 미들 배너 (풀블리드 이미지)
   ================================================ */

.am-sect7 {
    position: relative;
    width: 100%;
}

.am-sect7 .am-inner {
    width: 100%;
    height: 60vw;
    max-height: 700px;
    min-height: 400px;
    background: url('/resources/images/auditionme/middle_banner.png') no-repeat center / cover;
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.am-sect7-content {
    padding: 60px 80px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.am-sect7-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
}

.am-sect7-icon {
    width: 24px;
    height: auto;
}

.am-sect7-title {
    font-size: 52px;
    font-weight: 800;
    color: var(--am-white);
    line-height: 120%;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.5px;
}


/* ================================================
   sect8 — UI Designs (전체 화면 이미지 섹션)
   ================================================ */

.am-sect8 {
    background-color: var(--am-dark2);
    padding: 100px 0 0;
    width: 100%;
}

.am-sect8 .am-inner {
    max-width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

.am-sect8-head {
    text-align: center;
    margin-bottom: 60px;
    padding: 0 40px;
}

.am-sect8-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--am-lime);
    margin-bottom: 16px;
    line-height: 130%;
}

.am-sect8-desc {
    font-size: 15px;
    color: var(--am-text-muted);
    line-height: 170%;
}

.am-sect8-img-wrap {
    width: 100%;
    line-height: 0;
}

.am-sect8-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* 롤링 텍스트 */
.am-rolling-wrap {
    width: 100%;
    overflow: hidden;
    background-color: var(--am-dark2);
    padding: 32px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.am-rolling-inner {
    display: flex;
    gap: 60px;
    width: max-content;
    animation: am-rolling 20s linear infinite;
}

.am-rolling-inner span {
    font-size: 48px;
    font-weight: 800;
    color: rgba(229, 255, 119, 0.12);
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

@keyframes am-rolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


/* ================================================
   반응형
   ================================================ */

/* 태블릿 (1024px) */
@media screen and (max-width: 1024px) {

    /* sect1 */
    .am-cover-content {
        height: 620px;
    }

    .am-banner-left {
        width: 220px;
        height: 212px;
        top: 300px;
        left: 16%;
    }

    .am-banner-right {
        width: 220px;
        height: 212px;
        top: 400px;
        left: 58%;
    }

    .am-phone-back {
        left: 36%;
        width: 42%;
    }

    .am-phone-front {
        left: 19%;
        width: 44%;
    }

    .am-score-labels {
        right: 20%;
        top: 180px;
    }

    .am-cover-emoji {
        width: 80px;
        left: 15%;
        top: 32%;
    }

    .am-btn-apply,
    .am-btn-details {
        font-size: 13px;
        padding: 8px 12px;
    }

    .am-logo img {
        height: 40px;
    }

    .am-cover-subtitle {
        font-size: 13px;
    }

    /* sect2 */
    .am-sect2 .am-inner {
        gap: 40px;
        padding: 0 30px;
    }

    .am-sect2-title {
        font-size: 32px;
    }

    .am-sect2-desc {
        font-size: 16px;
    }

    .am-sect2-index-col li {
        font-size: 16px;
    }

    .am-sect2-label {
        min-width: 120px;
    }

    /* sect3 */
    .am-sect3 {
        padding: 100px 0;
    }

    .am-sect3 .am-inner {
        padding: 0 30px;
    }

    .am-sect3-title {
        font-size: 32px;
    }

    .am-asis strong,
    .am-tobe strong {
        font-size: 16px;
    }

    /* sect4 */
    .am-sect4-top {
        padding: 60px 0 80px;
    }

    .am-sect4-top .am-inner,
    .am-sect4-dark .am-inner {
        padding: 0 30px;
    }

    .am-sect4-title {
        font-size: 28px;
    }

    .am-card-keyword {
        font-size: 26px;
    }

    .am-sect4-card {
        padding: 48px 24px;
    }

    .am-goal-title {
        font-size: 22px;
    }

    /* sect5 */
    .am-sect5-top {
        padding: 0 30px;
    }

    .am-sect5-content::before {
        left: 460px;
    }

    .am-style-left {
        width: 460px;
        padding: 40px 30px 60px;
    }

    .am-style-center {
        left: 460px;
    }

    .am-style-right {
        padding: 40px 30px 60px;
    }

    .am-color-swatch {
        width: 140px;
        height: 120px;
    }

    .am-style-phone-img {
        width: 180px;
    }

    .am-typo-ko {
        font-size: 38px;
    }

    .am-typo-en-bold {
        font-size: 32px;
    }

    .am-typo-ko-sub {
        font-size: 32px;
    }

    .am-typo-en-sub {
        font-size: 26px;
    }

    .am-sub-swatch {
        width: 90px;
        height: 88px;
    }

    /* sect6 */
    .am-sect6 .am-inner {
        padding: 0 20px;
    }

    .am-sect6-title {
        font-size: 28px;
    }

    .am-ia-node {
        font-size: 13px;
        padding: 8px 12px;
        min-width: 60px;
    }

    .am-ia-depth2 li {
        font-size: 13px;
    }

    /* sect7 */
    .am-sect7-content {
        padding: 48px 40px;
    }

    .am-sect7-title {
        font-size: 40px;
    }

    /* sect8 */
    .am-sect8 {
        padding: 80px 0 0;
    }

    .am-sect8-head {
        padding: 0 30px;
        margin-bottom: 48px;
    }

    .am-sect8-title {
        font-size: 28px;
    }

    .am-rolling-inner span {
        font-size: 36px;
    }

    .am-rolling-inner {
        gap: 40px;
    }
}

/* 모바일 (767px) */
@media screen and (max-width: 767px) {

    /* sect1 */
    .am-sect1 {
        min-height: 793px;
        background: var(--am-lime) url("/resources/images/auditionme/sect1_bg_m.png") no-repeat left 50% bottom 50px;
    }

    .am-cover-header {
        padding-top: 32px;
    }

    .am-cover-subtitle {
        font-size: 11px;
        white-space: normal;
        text-align: center;
        padding: 0 16px;
    }

    .am-cover-content {
        display: none;
    }

    .am-banner-left {
        left: 4%;
        top: 200px;
        width: 140px;
        height: 135px;
        border-radius: 16px;
        z-index: 1;
    }

    .am-banner-right {
        left: auto;
        right: 4%;
        top: 260px;
        width: 140px;
        height: 135px;
        border-radius: 16px;
        z-index: 4;
    }

    .am-banner img {
        border-radius: 16px;
    }

    .am-btn-apply,
    .am-btn-details {
        font-size: 10px;
        padding: 5px 8px;
    }

    .am-phone-front {
        left: 14%;
        width: 54%;
    }

    .am-phone-back {
        left: 34%;
        width: 52%;
    }

    .am-score-labels {
        display: none;
    }

    .am-cover-emoji {
        width: 60px;
        left: 12%;
        top: 24%;
    }

    .am-cover-hearts,
    .am-cover-thumb {
        display: none;
    }

    .am-logo img {
        height: 32px;
    }

    .am-cover-subtitle {
        font-size: 11px;
        white-space: normal;
        text-align: center;
        padding: 0 16px;
    }

    /* sect2 */
    .am-sect2 .am-inner {
        flex-direction: column;
        gap: 24px;
        padding: 0 20px;
    }

    .am-sect2-bg-row {
        padding-top: 64px;
        padding-bottom: 60px;
    }

    .am-sect2-index-row {
        padding-top: 48px;
        padding-bottom: 64px;
    }

    .am-sect2-label {
        min-width: unset;
        font-size: 13px;
    }

    .am-sect2-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .am-sect2-desc {
        font-size: 15px;
    }

    .am-sect2-desc br {
        display: none;
    }

    .am-sect2-index-content {
        gap: 32px;
        flex-wrap: wrap;
    }

    .am-sect2-index-col li {
        font-size: 15px;
    }

    /* sect3 */
    .am-sect3 {
        padding: 64px 0;
    }

    .am-sect3 .am-inner {
        padding: 0 20px;
    }

    .am-sect3-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .am-sect3-desc {
        font-size: 14px;
    }

    .am-sect3-desc br {
        display: none;
    }

    .am-sect3-sub {
        font-size: 13px;
    }

    .am-sect3-columns {
        display: none;
    }

    .am-sect3-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 32px 0;
    }

    .am-asis {
        padding-right: 0;
        width: 100%;
    }

    .am-asis strong,
    .am-tobe strong {
        font-size: 15px;
    }

    .am-arrow-wrap {
        width: 100%;
        justify-content: flex-start;
    }

    .am-tobe {
        padding-left: 0;
        width: 100%;
    }

    /* sect4 */
    .am-sect4-top {
        padding: 48px 0 60px;
    }

    .am-sect4-top .am-inner,
    .am-sect4-dark .am-inner {
        padding: 0 20px;
    }

    .am-sect4-title {
        font-size: 22px;
    }

    .am-sect4-desc br {
        display: none;
    }

    .am-sect4-cards {
        flex-direction: column;
    }

    .am-sect4-card {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding: 48px 24px;
    }

    .am-sect4-card:last-child {
        border-bottom: none;
    }

    .am-card-keyword {
        font-size: 24px;
    }

    .am-sect4-goal {
        flex-direction: column;
        gap: 20px;
        margin-top: 48px;
        padding-top: 48px;
    }

    .am-goal-label {
        min-width: unset;
    }

    .am-goal-title {
        font-size: 20px;
    }

    .am-goal-desc br {
        display: none;
    }

    /* sect5 */
    .am-sect5 {
        padding: 64px 0;
    }

    .am-sect5-top {
        padding: 0 20px;
        margin-bottom: 40px;
    }

    .am-sect5-title {
        font-size: 22px;
    }

    .am-sect5-desc br {
        display: none;
    }

    .am-sect5-content {
        flex-direction: column;
        min-height: unset;
        gap: 40px;
        padding: 0 20px;
    }

    .am-sect5-content::before {
        display: none;
    }

    .am-style-left {
        width: 100%;
        flex-direction: row;
        padding: 0;
        gap: 16px;
    }

    .am-color-swatch {
        flex: 1;
        width: auto;
        height: 110px;
    }

    .am-style-center {
        position: static;
        transform: none;
        display: flex;
        justify-content: center;
    }

    .am-style-phone-img {
        width: 180px;
    }

    .am-style-right {
        width: 100%;
        align-items: flex-start;
        text-align: left;
        padding: 0;
        gap: 32px;
    }

    .am-typo-ko {
        font-size: 36px;
    }

    .am-typo-en-bold {
        font-size: 30px;
    }

    .am-typo-ko-sub {
        font-size: 30px;
    }

    .am-typo-en-sub {
        font-size: 24px;
    }

    .am-sub-colors {
        width: 100%;
    }

    .am-sub-swatch {
        flex: 1;
        height: 80px;
    }

    /* sect6 */
    .am-sect6 {
        padding: 64px 0;
    }

    .am-sect6-title {
        font-size: 24px;
    }

    .am-sect6-desc {
        font-size: 14px;
    }

    .am-sect6-desc br {
        display: none;
    }

    .am-ia-depth1 {
        flex-direction: column;
        gap: 40px;
        align-items: flex-start;
    }

    .am-ia-depth1 > li {
        flex: unset;
        width: 100%;
        align-items: flex-start;
    }

    .am-ia-depth1 > li::before,
    .am-ia-depth1 > li::after {
        display: none;
    }

    .am-ia-node::after {
        display: none !important;
    }

    .am-ia-depth2 {
        margin-top: 16px;
        align-items: flex-start;
        gap: 10px;
    }

    .am-ia-depth2 li {
        font-size: 14px;
        text-align: left;
    }

    /* sect7 */
    .am-sect7 .am-inner {
        min-height: 300px;
    }

    .am-sect7-content {
        padding: 40px 24px;
        gap: 12px;
    }

    .am-sect7-sub {
        font-size: 13px;
    }

    .am-sect7-title {
        font-size: 28px;
    }

    /* sect8 */
    .am-sect8 {
        padding: 64px 0 0;
    }

    .am-sect8-head {
        padding: 0 20px;
        margin-bottom: 36px;
    }

    .am-sect8-title {
        font-size: 22px;
    }

    .am-sect8-desc br {
        display: none;
    }

    .am-sect8-desc {
        font-size: 14px;
    }

    .am-rolling-inner span {
        font-size: 24px;
    }

    .am-rolling-inner {
        gap: 24px;
    }

    .am-rolling-wrap {
        padding: 20px 0;
    }
}

/* ================================================
   sect2 — Overview
   ================================================ */

.am-sect2-overview {
    position: relative;
    width: 100%;
    height: 1200px; /* 1080px → 1200px */
    background-color: #000;
    overflow: hidden;
}

.am-ov-desc.mo {
    display: none;
}

.am-ov-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    pointer-events: none;
    z-index: 0;
    height: 1200px;
}

.am-ov-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* bottom → center로 변경 */
    display: block;
}

.am-ov-dim {
    position: absolute;
    inset: 0;
    background: #000;
    mix-blend-mode: multiply;
    opacity: 0.82;
    z-index: 1;
    pointer-events: none;
}

.am-ov-content {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.am-ov-label {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'SUIT Variable', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--am-lime);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.am-ov-text-wrap {
    position: absolute;
    left: 41%;
    top: 45%;
    transform: translateY(-50%);
    width: 55%;
    padding-right: 80px;
    box-sizing: border-box;
}

.am-ov-headline {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 64px;
    font-weight: 600;
    color: var(--am-lime);
    line-height: 1.28;
    letter-spacing: -2.56px;
    margin: 0 0 40px 0;
}

.am-ov-desc {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    line-height: 1.58;
}

/* 태블릿 */
@media screen and (max-width: 1440px) {
    .am-ov-headline {
        font-size: 52px;
    }
}

@media screen and (max-width: 1024px) {
    .am-sect2-overview {
        height: auto;
        min-height: 700px;
        padding: 120px 0;
    }

    .am-ov-bg {
        width: 40%;
        /*height: 600px;*/
        top: 20%;
    }

    .am-ov-text-wrap {
        left: 42%;
        width: 55%;
    }

    .am-ov-headline {
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .am-ov-desc {
        font-size: 15px;
    }

    .am-ov-desc br {
        display: none;
    }
}

/* 모바일 */
@media screen and (max-width: 767px) {
    .am-sect2-overview {
        height: 800px;
        padding: 0;
    }

    .am-ov-bg {
        width: 100%;
        top: -24%;
    }

    .am-ov-text-wrap {
        position: static;
        transform: none;
        width: auto;
        padding: 260px 20px 64px;
        left: auto;
        text-align: center;
    }

    .am-ov-headline {
        font-size: 32px;
        letter-spacing: -1px;
        margin-bottom: 24px;
    }

    .am-ov-desc {
        font-size: 16px;
        display: none;
    }

    .am-ov-desc.mo {
        display: block;
        font-variant-numeric: lining-nums proportional-nums;
        font-feature-settings: 'dlig' on;
        font-family: "SUIT Variable";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 158%;
        letter-spacing: -0.64px;
    }

    .am-ov-desc br {
        display: block;
    }

    .am-ov-label {
        top: 64px;
    }

}

/* ================================================
   sect3 — Market Research
   ================================================ */

.am-sect3-market {
    background-color: #262626;
    width: 100%;
    padding: 80px 0 100px;
}

.am-mk-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 112px;
    box-sizing: border-box;
}

.am-mk-label {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--am-lime);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 40px;
}

.am-mk-headline {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 42px;
    font-weight: 600;
    color: #fff;
    line-height: 1.28;
    letter-spacing: -0.5px;
    margin-bottom: 32px;
}

.am-mk-desc {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #b1b1b1;
    line-height: 1.44;
    margin-bottom: 80px;
}

/* 카드 2개 가로 배치 */
.am-mk-cards {
    display: flex;
    gap: 24px;
}

.am-mk-card {
    flex: 1;
    background-color: #1c1c1c;
    border-radius: 48px;
    padding: 72px 40px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.am-mk-card img {
    height: auto;
    display: block;
    margin-bottom: 48px;
    width: 100%;
}

.am-mk-card.r_img img {
    width: 100%;
}

.am-mk-card-label {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin-bottom: 12px;
}

.am-mk-source {
    font-size: 13px;
    color: #767676;
    text-align: center;
    line-height: 1.58;
    word-break: break-all;
}

.am-mk-source a {
    color: #767676;
    text-decoration: underline;
}

/* 태블릿 */
@media screen and (max-width: 1024px) {
    .am-mk-inner {
        padding: 0 40px;
    }

    .am-mk-headline {
        font-size: 32px;
    }

    .am-mk-desc br {
        display: none;
    }
}

/* 모바일 */
@media screen and (max-width: 767px) {
    .am-sect3-market {
        padding: 64px 0;
    }

    .am-mk-inner {
        padding: 0 20px;
    }

    .am-mk-headline {
        font-size: 24px;
    }

    .am-mk-cards {
        flex-direction: column;
    }

    .am-mk-card {
        border-radius: 28px;
        padding: 40px 24px 32px;
    }
    .am-mk-card img {
        width: 100%;
    }
    .am-mk-card.r_img img {
        width: 100%;
    }
}

/* ================================================
   sect4 — Persona
   ================================================ */

.am-sect4-persona {
    background-color: #262626;
    width: 100%;
    padding: 80px 0 100px;
}

.am-ps-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 112px;
    box-sizing: border-box;
}

.am-ps-label {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--am-lime);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 40px;
}

.am-ps-headline {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 42px;
    font-weight: 600;
    color: #fff;
    line-height: 1.28;
    letter-spacing: -0.5px;
    margin-bottom: 60px;
}

.am-ps-cards {
    display: flex;
    gap: 24px;
}

.am-ps-card {
    flex: 1;
}

.am-ps-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 64px;
}

/* 태블릿 */
@media screen and (max-width: 1024px) {
    .am-ps-inner {
        padding: 0 40px;
    }

    .am-ps-headline {
        font-size: 32px;
    }

    .am-ps-headline br {
        display: none;
    }

    .am-ps-card img {
        border-radius: 40px;
    }
}

/* 모바일 */
@media screen and (max-width: 767px) {
    .am-sect4-persona {
        padding: 64px 0;
    }

    .am-ps-inner {
        padding: 0 24.5px;
    }

    .am-ps-headline {
        text-align: center;
        font-variant-numeric: lining-nums proportional-nums;
        font-feature-settings: 'dlig' on;
        font-family: 'SUIT Variable', sans-serif;
        font-size: 28px;
        font-style: normal;
        font-weight: 600;
        line-height: 132%; /* 36.96px */
        text-transform: uppercase;
    }

    .am-ps-cards {
        flex-direction: column;
    }

    .am-ps-card img {
        border-radius: 28px;
    }
}

/* ================================================
   sect5 — As Is To Be
   ================================================ */

.am-sect5-asistobe {
    background-color: #262626;
    width: 100%;
    padding: 80px 0 120px;
}

.am-ab-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 226px;
    box-sizing: border-box;
}

.am-ab-label {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--am-lime);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 40px;
}

.am-ab-headline {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 42px;
    font-weight: 600;
    color: #fff;
    line-height: 1.28;
    letter-spacing: -0.5px;
    margin-bottom: 80px;
}

/* 컬럼 타이틀 */
.am-ab-cols-title {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.am-ab-col-problem {
    flex: 1;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #7e7e7e;
    text-transform: uppercase;
    text-align: center;
}

.am-ab-col-spacer {
    width: 128px;
    flex-shrink: 0;
}

.am-ab-col-solution {
    flex: 1;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--am-lime);
    text-transform: uppercase;
    text-align: center;
}

/* 카드 리스트 */
.am-ab-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.am-ab-row {
    display: flex;
    align-items: center;
    gap: 0;
}

/* Problem 카드 */
.am-ab-card--problem {
    flex: 1;
    height: 168px;
    background-color: #1c1c1c;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 40px;
    box-sizing: border-box;
}

.am-ab-card--problem p {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    line-height: 1.48;
}

/* 화살표 */
.am-ab-arrow {
    width: 128px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24px;
}

.am-ab-arrow img {
    width: 128px;
    height: auto;
    display: block;
}

/* Solution 카드 */
/* 카드 그림자 공통 */
.am-ab-card--problem,
.am-ab-card--solution {
    position: relative;
    overflow: visible;
}

/* Problem 그림자 — 왼쪽 방향 */
.am-ab-problem-shadow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    filter: blur(5px);
    pointer-events: none;
}

.am-ab-problem-shadow--1 {
    background: #111;
    opacity: 0.5;
    transform: translate(-48px, 48px);
    z-index: -1;
}

.am-ab-problem-shadow--2 {
    background: #0f0f0f;
    opacity: 0.3;
    transform: translate(-96px, 96px);
    z-index: -2;
}

/* Solution 카드 */
.am-ab-card--solution {
    flex: 1;
    height: 168px;
    background-color: var(--am-lime);
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 88px;
    padding: 0 40px;
    box-sizing: border-box;
}

/* Solution 그림자 — 오른쪽 방향 */
.am-ab-solution-shadow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    filter: blur(5px);
    pointer-events: none;
}

.am-ab-solution-shadow--1 {
    background: #a5b856;
    opacity: 0.2;
    transform: translate(48px, 48px);
    z-index: -1;
}

.am-ab-solution-shadow--2 {
    background: #859445;
    opacity: 0.1;
    transform: translate(96px, 96px);
    z-index: -2;
}


.am-ab-icon {
    width: 112px;
    height: 112px;
    background: #fff;
    border-radius: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.am-ab-icon img {
    width: 70%;
    height: auto;
    display: block;
}

.am-ab-card--solution p {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #2c2c2c;
    line-height: 1.48;
    text-align: center;
}

/* 태블릿 */
@media screen and (max-width: 1440px) {
    .am-ab-inner {
        padding: 0 112px;
    }

    .am-ab-headline {
        font-size: 34px;
    }
}

@media screen and (max-width: 1024px) {
    .am-ab-inner {
        padding: 0 40px;
    }

    .am-ab-headline {
        font-size: 26px;
    }

    .am-ab-headline br {
        display: none;
    }

    .am-ab-col-problem,
    .am-ab-col-solution {
        font-size: 22px;
    }

    .am-ab-col-spacer {
        width: 60px;
    }

    .am-ab-arrow {
        width: 60px;
    }

    .am-ab-card--problem p,
    .am-ab-card--solution p {
        font-size: 15px;
    }

    .am-ab-icon {
        width: 80px;
        height: 80px;
    }
}

/* 모바일 */
@media screen and (max-width: 767px) {
    .am-sect5-asistobe {
        padding: 64px 0;
    }

    .am-ab-inner {
        padding: 0 20px;
    }

    .am-ab-headline {
        font-size: 20px;
    }

    .am-ab-cols-title {
        display: none;
    }

    .am-ab-row {
        flex-direction: column;
        gap: 8px;
    }

    .am-ab-arrow {
        transform: rotate(90deg);
        width: auto;
        height: 40px;
    }

    .am-ab-card--problem,
    .am-ab-card--solution {
        width: 100%;
        height: auto;
        padding: 28px 24px;
    }

    .am-ab-card--solution {
        flex-direction: column;
        text-align: center;
    }

    .am-ab-icon {
        width: 64px;
        height: 64px;
    }

    .am-ab-arrow img {
        margin-top: -35px;
        width: 50px;
    }
}

/* ================================================
   sect5-5 — Our Goal
   ================================================ */

.am-sect5-goal {
    background: url("/resources/images/auditionme/sect5-5_bg.png") no-repeat center / cover;
    width: 100%;
    padding: 80px 0 100px;
    overflow: hidden;
    position: relative;
}

/* am-og-inner z-index 추가 */
.am-og-inner {
    position: relative;
    z-index: 1;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 112px;
    box-sizing: border-box;
}

.am-og-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 112px;
    box-sizing: border-box;
}

.am-og-label {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #2c2c2c;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
}

.am-og-headline {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: #262626;
    line-height: 1.24;
    letter-spacing: -0.5px;
    margin-bottom: 24px;
}

.am-og-desc {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #2c2c2c;
    line-height: 1.44;
    margin-bottom: 24px;
}

.am-og-cards {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.am-og-card {
    flex: 1;
}

.am-og-card--2 {
    margin-top: 100px;
}

.am-og-card--3 {
    margin-top: 50px;
}

.am-og-card img {
    width: 100%;
    height: auto;
    display: block;
}

/* 태블릿 1440px */
@media screen and (max-width: 1440px) {
    .am-og-inner {
        padding: 0 60px;
    }

    .am-og-headline {
        font-size: 36px;
    }
}

/* 태블릿 1024px */
@media screen and (max-width: 1024px) {
    .am-sect5-goal {
        padding: 60px 0 80px;
    }

    .am-og-inner {
        padding: 0 40px;
    }

    .am-og-headline {
        font-size: 28px;
    }

    .am-og-desc {
        font-size: 14px;
    }

    .am-og-desc br {
        display: none;
    }

    .am-og-cards {
        gap: 12px;
    }

    .am-og-card:nth-child(2) {
        margin-top: 60px;
    }

    .am-og-card:nth-child(3) {
        margin-top: 30px;
    }
}

/* 모바일 767px */
@media screen and (max-width: 767px) {
    .am-sect5-goal {
        padding: 48px 0 64px;
    }

    .am-og-inner {
        padding: 0 20px;
    }

    .am-og-headline {
        text-align: center;
        font-variant-numeric: lining-nums proportional-nums;
        font-feature-settings: 'dlig' on;
        font-family: 'SUIT Variable', sans-serif;
        font-size: 28px;
        font-style: normal;
        font-weight: 800;
        line-height: 128%; /* 35.84px */
        letter-spacing: -0.56px;
    }

    .am-og-desc {
        text-align: center;
        font-variant-numeric: lining-nums proportional-nums;
        font-feature-settings: 'dlig' on;
        font-family: "SUIT Variable";
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 144%; /* 21.6px */
    }

    .am-ab-label {
        font-variant-numeric: lining-nums proportional-nums;
        font-feature-settings: 'dlig' on;
        font-family: 'SUIT Variable', sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 12px; /* 66.667% */
        text-transform: uppercase;
    }

    .am-ab-headline {
        text-align: center;
        font-variant-numeric: lining-nums proportional-nums;
        font-feature-settings: 'dlig' on;
        font-family: 'SUIT Variable', sans-serif;
        font-size: 28px;
        font-style: normal;
        font-weight: 600;
        line-height: 128%; /* 35.84px */
        text-transform: uppercase;
    }

    .am-og-cards {
        flex-direction: column;
        align-items: center;
    }

    .am-og-card--2 {
        margin-top: 0;
    }

    .am-og-card--3 {
        margin-top: 0;
    }

    .am-og-card:nth-child(2) {
        margin-top: 0;
    }

    .am-og-card:nth-child(3) {
        margin-top: 0;
    }

}



/* ================================================
   sect6 — Brand Core Values
   ================================================ */

.am-sect6-brand {
    background-color: #262626;
    width: 100%;
    padding: 80px 0 100px;
    overflow: hidden;
}

.am-bv-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 112px;
    box-sizing: border-box;
}

.am-bv-label {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--am-lime);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 60px;
}

/* 메인 타이포 */
.am-bv-typo {
    margin-bottom: 80px;
}

.am-bv-line {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 96px;
    font-weight: 100;
    line-height: 1.2;
    white-space: nowrap;
}

.am-bv-lime {
    color: var(--am-lime);
}

/* Frame 키워드 — 핑크 테두리 박스 */
.am-bv-keyword {
    color: #fff;
    font-weight: 100;
    position: relative;
    display: inline-block;
}

.am-bv-keyword--frame {
    border: 2px solid #fc5d95;
    padding: 0 8px;
    background: transparent;
    position: relative;
}

.am-bv-keyword--frame::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 25px;
    width: 100%;
    height: 100%;
    background: #fc5d95;
    opacity: 0.1;
    z-index: -1;
}

/* Point 키워드 — 핑크 닷 장식 */
.am-bv-keyword--point {
    position: relative;
}

.am-bv-keyword--point::before {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fc5d95;
    top: 50%;
    transform: translateY(-50%);
    left: -20px;
}

.am-bv-lime--point::before {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fc5d95;
    top: 45%;
    transform: translateY(-50%);
    left: 397px;
}

.am-bv-keyword--point::after {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fc5d95;
    top: 51%;
    transform: translateY(-50%);
    right: -122px;
}

/* 가운데 원 — PHP에서 span 추가 필요 */
.am-bv-point-mid {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fc5d95;
    vertical-align: middle;
    margin: 0 -4px;
}

/* Loop 이미지 인라인 정렬 */
.am-bv-loop-img {
    height: 0.85em; /* 폰트 크기에 맞게 */
    width: auto;
    display: inline-block;
    vertical-align: middle;
    margin: 0 -2px; /* 좌우 간격 미세 조정 */
}

/* 하단 설명 3개 */
.am-bv-descs {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    padding-top: 60px;
}

.am-bv-desc-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.am-bv-desc-item p {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fc5d95;
    line-height: 1.48;
}

/* 아이콘 */
.am-bv-desc-icon {
    margin-bottom: 4px;
}

.am-bv-desc-icon--square {
    width: 17px;
    height: 17px;
    border: 2px solid #fc5d95;
}

.am-bv-desc-icon--circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fc5d95;
}

.am-bv-desc-icon--loop img {
    width: 36px;
    height: auto;
    display: block;
}

/* 태블릿 */
@media screen and (max-width: 1440px) {
    .am-bv-line {
        font-size: 72px;
    }
}

@media screen and (max-width: 1024px) {
    .am-bv-inner {
        padding: 0 40px;
    }

    .am-bv-line {
        font-size: 48px;
        white-space: normal;
    }

    .am-bv-descs {
        gap: 40px;
    }

    .am-bv-desc-item p {
        font-size: 14px;
    }

    .am-bv-keyword--point::before,
    .am-bv-keyword--point::after {
        width: 20px;
        height: 20px;
    }

    .am-bv-point-mid {
        width: 20px;
        height: 20px;
    }
}

/* 모바일 */
@media screen and (max-width: 767px) {
    .am-sect6-brand {
        padding: 30px 0;
    }

    .am-bv-inner {
        padding: 0 20px;
    }

    .am-bv-line {
        font-variant-numeric: lining-nums proportional-nums;
        font-feature-settings: 'dlig' on;
        font-family: 'SUIT Variable', sans-serif;
        font-size: 56px;
        font-style: normal;
        font-weight: 100;
        line-height: 120%; /* 67.2px */
    }

    .am-bv-descs {
        flex-direction: column;
        gap: 32px;
    }

    .am-bv-keyword--frame {
        padding: 0 4px;
    }

    .am-bv-keyword--point::before,
    .am-bv-keyword--point::after {
        width: 14px;
        height: 14px;
        left: -10px;
        right: -10px;
    }

    .am-bv-point-mid {
        width: 14px;
        height: 14px;
    }

    .am-bv-label {
        margin-bottom: 0;
        position: absolute;
        top: 2%;
    }
}

/* ================================================
   sect7 — UX Strategy
   ================================================ */

.am-sect7-ux {
    background-color: #262626;
    width: 100%;
    padding: 80px 0 100px;
}

.am-ux-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 112px;
    box-sizing: border-box;
}

.am-ux-label {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--am-lime);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 32px;
}

.am-ux-headline {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 42px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}

.am-ux-desc {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 15px;
    color: #b1b1b1;
    line-height: 1.3;
    margin-bottom: 60px;
}

/* 카드 3개 */
.am-ux-cards {
    display: flex;
    gap: 16px;
}

.am-ux-card {
    flex: 1;
    background-color: #1c1c1c;
    border-radius: 64px;
    padding: 48px 48px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.am-ux-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.am-ux-num {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--am-lime);
}

.am-ux-card-title {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--am-lime);
}

.am-ux-card-desc {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 32px;
}

.am-ux-mockup {
    margin-top: auto;
    max-width: 555px;
    width: 100%;
}

.am-ux-mockup img {
    width: 100%;
    height: auto;
    display: block;
}

/* 태블릿 */
@media screen and (max-width: 1440px) {
    .am-ux-inner {
        padding: 0 60px;
    }

    .am-ux-headline {
        font-size: 34px;
    }
}

@media screen and (max-width: 1024px) {
    .am-ux-inner {
        padding: 0 40px;
    }

    .am-ux-headline {
        font-size: 26px;
    }

    .am-ux-card {
        border-radius: 40px;
        padding: 36px 36px;
    }
}

/* 모바일 */
@media screen and (max-width: 767px) {
    .am-sect7-ux {
        padding: 64px 0;
    }

    .am-ux-inner {
        padding: 0 20px;
    }

    .am-ux-headline {
        font-size: 22px;
    }

    .am-ux-cards {
        flex-direction: column;
    }

    .am-ux-card {
        border-radius: 28px;
        padding: 32px 28px 0;
    }
}

/* ================================================
   sect8 — UI Strategy
   ================================================ */

.am-sect8-ui {
    background-color: #262626;
    width: 100%;
    padding: 80px 0 100px;
}

.am-ui-label {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--am-lime);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 32px;
}

/* 메인 카드 */
.am-ui-card {
    max-width: 1698px;
    margin: 0 auto;
    background-color: #1c1c1c;
    border-radius: 64px;
    overflow: hidden;
    padding: 68px 0 80px;
    text-align: center;
}

/* 각 행 */
.am-ui-row {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 0 112px;
    margin-bottom: 60px;
}

.am-ui-row:last-child {
    margin-bottom: 0;
}

/* 큰 타이포 */
.am-ui-big {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 88px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    text-align: left;
}

.am-ui-big--lime {
    color: var(--am-lime);
}

.am-ui-big--pink {
    color: #fc5d95;
    text-align: center;
    word-break: break-word;
}

/* 설명 텍스트 */
.am-ui-sub {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    line-height: 1.3;
    text-align: left;
    text-align: center;
}

/* 각 행 들여쓰기 — 피그마 수치 기반 */
.am-ui-row--1 {
    padding-left: 430px;
    padding-right: 430px;
}

.am-ui-row--2 {
    padding-left: 311px;
    padding-right: 310px;
}

.am-ui-row--3 {
    padding-left: 193px;
    padding-right: 192px;
}

/* 태블릿 */
@media screen and (max-width: 1440px) {
    .am-ui-big {
        font-size: 64px;
    }

    .am-ui-row--1 {
        padding-left: 280px;
    }

    .am-ui-row--2 {
        padding-left: 180px;
    }

    .am-ui-row--3 {
        padding-left: 80px;
    }
}

@media screen and (max-width: 1024px) {
    .am-ui-card {
        border-radius: 40px;
        padding: 48px 0 60px;
    }

    .am-ui-big {
        font-size: 48px;
    }

    .am-ui-sub {
        font-size: 16px;
    }

    .am-ui-row--1 {
        padding-left: 60px;
        padding-right: 40px;
    }

    .am-ui-row--2 {
        padding-left: 60px;
        padding-right: 40px;
    }

    .am-ui-row--3 {
        padding-left: 60px;
        padding-right: 40px;
    }
}

/* 모바일 */
@media screen and (max-width: 767px) {
    .am-sect8-ui {
        padding: 64px 0;
    }

    .am-ui-card {
        border-radius: 64px;
        margin: 0 20px;
        padding: 40px 0 48px;
    }

    .am-ui-big {
        text-align: center;
        font-family: 'SUIT Variable', sans-serif;
        font-size: 48px;
        font-style: normal;
        font-weight: 800;
        line-height: 100%; /* 48px */
        text-transform: uppercase;
        text-align: center;
    }

    .am-ui-sub {
        text-align: center;
        font-family: 'SUIT Variable', sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%; /* 26px */
    }

    .am-ui-row {
        gap: 16px;
        margin-bottom: 40px;
    }

    .am-ui-row--1,
    .am-ui-row--2,
    .am-ui-row--3 {
        padding: 0 28px;
    }
}

/* ================================================
   sect9 — Design System
   ================================================ */

.am-sect9-ds {
    background-color: #262626;
    width: 100%;
    padding: 80px 0 100px;
}

.am-ds-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 112px;
    box-sizing: border-box;
}

.am-ds-label {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--am-lime);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 40px;
}

/* ── 컬러 스와치 ── */
.am-ds-colors {
    display: flex;
    gap: 16px;
    margin-bottom: 100px;
    align-items: flex-start;
    padding-bottom: 36px;
}

.am-ds-color-group--primary {
    flex: 0 0 919px;
    position: relative;
}

.am-ds-color-group--secondary {
    flex: 0 0 451px;
    position: relative;
}

.am-ds-color-group--neutral {
    flex: 0 0 296px;
    position: relative;
}

.am-ds-color-group--primary .am-ds-swatch,
.am-ds-color-group--secondary .am-ds-swatch,
.am-ds-color-group--neutral .am-ds-swatch {
    position: relative;
    z-index: 4;
}

.am-ds-layer {
    position: absolute;
    left: 0; /* 왼쪽은 항상 고정 */
    height: 100%;
    border-radius: 20px;
}

/* Lime punch */
.am-ds-color-group--primary .am-ds-layer-2 {
    background: #d7ed78;
    bottom: -30px;
    z-index: 3;
    right: 0;
}

.am-ds-color-group--primary .am-ds-layer-3 {
    background: #a5b856;
    bottom: -50px;
    z-index: 2;
    right: 60px;
}

.am-ds-color-group--primary .am-ds-layer-4 {
    background: #859445;
    bottom: -70px;
    z-index: 1;
    right: 120px;
}

/* Valentino pink */
.am-ds-color-group--secondary .am-ds-layer-2 {
    background: #eb6292;
    bottom: -30px;
    z-index: 3;
    right: 0;
}

.am-ds-color-group--secondary .am-ds-layer-3 {
    background: #b6436b;
    bottom: -50px;
    z-index: 2;
    right: 68px;
}

.am-ds-color-group--secondary .am-ds-layer-4 {
    background: #923656;
    bottom: -70px;
    z-index: 1;
    right: 121px;
}

/* Grayscale */
.am-ds-color-group--neutral .am-ds-layer-2 {
    background: #eeeeef;
    bottom: -30px;
    z-index: 3;
    right: 0;
}

.am-ds-color-group--neutral .am-ds-layer-3 {
    background: #d0d1d3;
    bottom: -50px;
    z-index: 2;
    right: 45px;
}

.am-ds-color-group--neutral .am-ds-layer-4 {
    background: #b4b5b9;
    bottom: -70px;
    z-index: 1;
    right: 79px;
}

.am-ds-swatch {
    border-radius: 20px;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 417px;
    box-sizing: border-box;
    position: relative;
}

.am-ds-swatch--lime {
    background-color: #e5ff77;
}

.am-ds-swatch--pink {
    background-color: #fc5d95;
}

.am-ds-swatch--gray {
    background-color: #f3f3f5;
}

.am-ds-swatch-info--top strong {
    display: block;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #212223;
    letter-spacing: -0.52px;
    line-height: 1.4;
    margin-bottom: 5px;
}

.am-ds-swatch-info--top span {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #212223;
}

.am-ds-swatch-info--bottom {
    text-align: right;
}

.am-ds-swatch-info--bottom strong {
    display: block;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #212223;
    letter-spacing: -0.16px;
    margin-bottom: 14px;
}

.am-ds-swatch-info--bottom span {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #212223;
}

/* ── 타이포그래피 ── */
.am-ds-typo {
    background-color: #f3f3f5;
    border-radius: 28px;
    padding: 60px 80px 80px;
    box-sizing: border-box;
}

.am-ds-typo-title {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 112px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
    letter-spacing: -2.24px;
    margin-bottom: 60px;
}

.am-ds-typo-font {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 56px;
    font-weight: 900;
    color: #212223;
    line-height: 1;
    letter-spacing: -1.12px;
    margin-bottom: 26px;
}

.am-ds-divider {
    border: none;
    border-top: 1px solid #3C3D40;
    margin-bottom: 32px;
}

/* 타이포 샘플 */
.am-ds-typo-samples {
    display: flex;
    gap: 0;
    align-items: flex-start;
}

/* General 섹션 */
.am-ds-typo-section--general {
    flex: 1;
    padding-right: 60px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Label 섹션 */
.am-ds-typo-section--label {
    flex: 0 0 auto;
    padding-left: 60px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* 섹션 헤드 */
.am-ds-typo-section-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.am-ds-typo-section-head strong {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.4px;
}

.am-ds-typo-section-head p {
    font-family: 'SUIT Variable', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

/* 섹션 바디 */
.am-ds-typo-section-body {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.am-ds-typo-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.am-ds-typo-group p {
    font-family: 'SUIT Variable', sans-serif;
    color: #212223;
}


/* ── 타이포 샘플 텍스트 클래스 ── */
/* General H */
.am-ts-h1-eb {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.64px;
}

.am-ts-h1-rg {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.64px;
}

.am-ts-h2-eb {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.52px;
}

.am-ts-h3-bd {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.44px;
}

/* General P */
.am-ts-p1-eb {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.4px;
}

.am-ts-p1-md {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.4px;
}

.am-ts-p2-eb {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.18px;
}

.am-ts-p2-rg {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.18px;
}

.am-ts-p3-eb {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.16px;
}

.am-ts-p3-bd {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.16px;
}

.am-ts-p3-rg {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.16px;
}

.am-ts-p4-bd {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.15px;
}

.am-ts-p4-md {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.15px;
}

.am-ts-p4-rg {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.15px;
}

.am-ts-muted {
    opacity: 0.2;
}

/* Body / Caption */
.am-ts-b1-eb {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.14px;
}

.am-ts-b1-md {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.14px;
}

.am-ts-b1-rg {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.14px;
}

.am-ts-b2-md {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.13px;
}

.am-ts-b2-rg {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.13px;
}

.am-ts-cap1 {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.12px;
}

.am-ts-cap2 {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.11px;
}

.am-ts-tiny {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.1px;
}

/* Label */
.am-ts-lb56 {
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1.12px;
}

.am-ts-lb28 {
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.56px;
}

.am-ts-lb26 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.52px;
}

.am-ts-lb20 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.4px;
}

.am-ts-lb18-eb {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.18px;
}

.am-ts-lb18 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.18px;
}

.am-ts-lb17 {
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.17px;
}

.am-ts-lb16-eb {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.16px;
}

.am-ts-lb16 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.16px;
}

.am-ts-lb15-sb {
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.15px;
}

.am-ts-lb15 {
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.15px;
}

/* Label 소형 */
.am-ts-lb14-bd {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.14px;
}

.am-ts-lb14-md {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.14px;
}

.am-ts-lb14 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.14px;
}

.am-ts-lb13-eb {
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.13px;
}

.am-ts-lb13-sb {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.13px;
}

.am-ts-lb13-md {
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.13px;
}

.am-ts-lb13 {
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.13px;
}

.am-ts-lb12-md {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.12px;
}

.am-ts-lb12 {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.12px;
}

.am-ts-lb11-sb {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.11px;
}

.am-ts-lb11-md {
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.11px;
}

.am-ts-lb11 {
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.11px;
}

.am-ts-lb10 {
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.1px;
}

/* 반응형 */
@media screen and (max-width: 1024px) {
    .am-ts-h1-eb, .am-ts-h1-rg {
        font-size: 24px;
    }

    .am-ts-h2-eb {
        font-size: 20px;
    }

    .am-ts-h3-bd {
        font-size: 18px;
    }

    .am-ts-lb56 {
        font-size: 36px;
    }

    .am-ts-lb28 {
        font-size: 22px;
    }

    .am-ts-lb26 {
        font-size: 20px;
    }

    .am-ds-typo-samples {
        flex-wrap: wrap;
    }

    .am-ds-typo-group {
        flex: 0 0 calc(33% - 20px);
    }

    .am-ds-typo-section--general {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #ccc;
        padding-bottom: 40px;
        flex-wrap: wrap;
    }

    .am-ds-typo-section--label {
        padding-left: 0;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 767px) {
    .am-ts-h1-eb, .am-ts-h1-rg {
        font-size: 32px;
    }

    .am-ts-h2-eb {
        font-size: 26px;
    }

    .am-ts-h3-bd {
        font-size: 22px;
    }

    .am-ts-lb56 {
        font-size: 56px;
    }

    .am-ts-lb28 {
        font-size: 28px;
    }

    .am-ts-lb26 {
        font-size: 26px;
    }

    .am-ds-typo-group {
        flex: 0 0 calc(50% - 10px);
    }

    .am-ds-typo-samples {
        flex-direction: column;
        gap: 40px;
    }

    .am-ds-typo-section-body {
        flex-wrap: wrap;
    }
}

/* 태블릿 */
@media screen and (max-width: 1440px) {
    .am-ds-color-group--primary {
        flex: 1;
    }

    .am-ds-color-group--secondary {
        flex: 0 0 320px;
    }

    .am-ds-color-group--neutral {
        flex: 0 0 220px;
    }

    .am-ds-typo-title {
        font-size: 80px;
    }

    .am-ds-typo-font {
        font-size: 42px;
    }
}

@media screen and (max-width: 1024px) {
    .am-ds-inner {
        padding: 0 40px;
    }

    .am-ds-typo {
        padding: 40px;
    }

    .am-ds-typo-title {
        font-size: 56px;
    }

    .am-ds-typo-font {
        font-size: 32px;
    }

    .am-ds-typo-samples {
        flex-wrap: wrap;
    }

    .am-ds-typo-group {
        flex: 0 0 calc(50% - 20px);
    }
}

/* 모바일 */
@media screen and (max-width: 767px) {
    .am-sect9-ds {
        padding: 64px 0;
    }

    .am-ds-inner {
        padding: 0 20px;
    }

    .am-ds-colors {
        flex-direction: column;
        gap: 100px;
    }

    .am-ds-color-group--primary,
    .am-ds-color-group--secondary,
    .am-ds-color-group--neutral {
        flex: unset;
        width: 100%;
    }

    .am-ds-swatch {
        min-height: 417px;
    }

    .am-ds-typo {
        padding: 28px 24px;
        border-radius: 20px;
    }

    .am-ds-typo-title {
        font-variant-numeric: lining-nums proportional-nums;
        font-feature-settings: 'dlig' on;
        font-family: 'SUIT Variable', sans-serif;
        font-size: 48px;
        font-style: normal;
        font-weight: 700;
        line-height: 12px; /* 25% */
        letter-spacing: -0.96px;
        text-align: center;
        margin-top: 40px;
    }

    .am-ds-typo-font {
        font-family: "SUIT Variable";
        font-size: 32px;
        font-style: normal;
        font-weight: 900;
        line-height: 100%; /* 32px */
        letter-spacing: -0.64px;
        margin-top: 80px;
    }

    .am-ds-typo-cols {
        flex-direction: column;
        gap: 24px;
    }

    .am-ds-typo-samples {
        flex-direction: column;
    }

    .am-ds-typo-group {
        flex: unset;
        width: 100%;
    }

    .am-ds-color-group--neutral .am-ds-layer-2 {
        background: #eeeeef;
        bottom: -30px;
        z-index: 3;
        right: 0;
    }

    .am-ds-color-group--neutral .am-ds-layer-3 {
        background: #d0d1d3;
        bottom: -50px;
        z-index: 2;
        right: 70px;
    }

    .am-ds-color-group--neutral .am-ds-layer-4 {
        background: #b4b5b9;
        bottom: -70px;
        z-index: 1;
        right: 125px;
    }

}

/* ================================================
   sect10 — UI Design
   ================================================ */

.am-sect10-uid {
    background-color: #262626;
    width: 100%;
    padding: 80px 0 120px;
    overflow: hidden;
}

.am-uid-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 112px;
    box-sizing: border-box;
}

.am-uid-label {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--am-lime);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 24px;
}

/* 탭 배지 */
.am-uid-tab-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.am-uid-tab {
    background-color: var(--am-lime);
    color: #2c2c2c;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 15px;
    font-weight: 800;
    padding: 10px 24px;
    border-radius: 27px;
    display: inline-block;
}

.am-uid-headline {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 20px;
}

.am-uid-desc {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #b1b1b1;
    line-height: 1.3;
    margin-bottom: 80px;
}

/* ── UI Design 목업 래퍼 ── */
.am-uid-img-wrap {
    width: 100%;
    overflow-x: scroll; /* 좌우 스크롤 허용 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
    cursor: grab; /* 드래그 커서 */
    /* 스크롤바 항상 표시 */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--am-lime) rgba(255, 255, 255, 0.1); /* Firefox */
}

.am-uid-img-wrap:active {
    cursor: grabbing;
}

/* Chrome/Safari 스크롤바 커스텀 */
.am-uid-img-wrap::-webkit-scrollbar {
    height: 4px; /* 스크롤바 높이 */
}

.am-uid-img-wrap::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1); /* 트랙 배경 */
    border-radius: 2px;
}

.am-uid-img-wrap::-webkit-scrollbar-thumb {
    background: var(--am-lime); /* 라임색 스크롤바 */
    border-radius: 2px;
}

.am-uid-img-wrap::-webkit-scrollbar-thumb:hover {
    background: var(--am-lime-dark);
}

.am-uid-img-wrap img {
    display: block;
    height: auto;
    max-width: none !important; /* 원본 크기 유지 */
    /* PC: 100% 너비 */
    width: 100%;
}

/* 태블릿/모바일 — 원본 크기 유지 */
@media screen and (max-width: 1024px) {
    .am-uid-img-wrap img {
        width: 1920px; /* 원본 너비 고정 */
    }
}


/* 태블릿 */
@media screen and (max-width: 1440px) {
    .am-uid-inner {
        padding: 0 60px;
    }
}

@media screen and (max-width: 1024px) {
    .am-uid-inner {
        padding: 0 40px;
    }

    .am-uid-notes {
        display: none;
    }
}

/* 모바일 */
@media screen and (max-width: 767px) {
    .am-sect10-uid {
        padding: 64px 0;
    }

    .am-uid-inner {
        padding: 0 20px;
    }

    .am-uid-headline {
        font-size: 20px;
    }

    .am-uid-desc br {
        display: none;
    }

    .am-uid-pc-img {
        display: none;
    }
}

/* ================================================
   sect11 — UI Design Shorts
   ================================================ */

.am-sect11-shorts {
    background-color: #1c1c1c;
    width: 100%;
    padding: 80px 0 120px;
    overflow: hidden;
}

.am-sh-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 112px;
    box-sizing: border-box;
}

/* 탭 배지 */
.am-sh-tab-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.am-sh-tab {
    background-color: var(--am-lime);
    color: #212223;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 15px;
    font-weight: 800;
    padding: 10px 24px;
    border-radius: 27px;
    display: inline-block;
}

.am-sh-headline {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 20px;
}

.am-sh-desc {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #b1b1b1;
    line-height: 1.3;
    margin-bottom: 80px;
}

/* 목업 전체 이미지 */
.am-sh-mockup-wrap {
    width: 100%;
}

.am-sh-mockup-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* 태블릿 */
@media screen and (max-width: 1024px) {
    .am-sh-inner {
        padding: 0 40px;
    }

    .am-sh-headline {
        font-size: 20px;
    }

    .am-sh-desc br {
        display: none;
    }
}

/* 모바일 */
@media screen and (max-width: 767px) {
    .am-sect11-shorts {
        padding: 64px 0;
    }

    .am-sh-inner {
        padding: 0 20px;
    }

    .am-sh-headline {
        font-size: 18px;
    }

    .am-sh-desc {
        font-size: 14px;
    }
}

/* ================================================
   sect12 — UI Design Shorts Detail & My Page
   ================================================ */

.am-sect12-detail {
    background-color: #262626;
    width: 100%;
    padding: 80px 0 120px;
    overflow: hidden;
}

.am-dt-inner {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 112px;
    box-sizing: border-box;
}

.am-dt-tab-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.am-dt-tab {
    background-color: var(--am-lime);
    color: #212223;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 15px;
    font-weight: 800;
    padding: 10px 24px;
    border-radius: 27px;
    display: inline-block;
}

.am-dt-headline {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 20px;
}

.am-dt-desc {
    text-align: center;
    font-family: 'SUIT Variable', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #b1b1b1;
    line-height: 1.3;
    margin-bottom: 80px;
}

.am-dt-mockup-wrap {
    width: 100%;
}

.am-dt-mockup-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* 태블릿 */
@media screen and (max-width: 1024px) {
    .am-dt-inner {
        padding: 0 40px;
    }

    .am-dt-headline {
        font-size: 20px;
    }

    .am-dt-desc br {
        display: none;
    }
}

/* 모바일 */
@media screen and (max-width: 767px) {
    .am-sect12-detail {
        padding: 64px 0;
    }

    .am-dt-inner {
        padding: 0 20px;
    }

    .am-dt-headline {
        font-size: 18px;
    }

    .am-dt-desc {
        font-size: 14px;
    }
}

/* ================================================
   sect1 — 추가 반응형 (1280px / 480px)
   ================================================ */

/* 1280px 이하 */
@media screen and (max-width: 1280px) {
    .am-cover-content {
        height: 760px;
    }

    .am-banner-left {
        width: 280px;
        height: 270px;
        top: 360px;
    }

    .am-banner-right {
        width: 280px;
        height: 270px;
        top: 480px;
    }

    .am-score-labels {
        right: 22%;
        top: 220px;
    }

    .am-score {
        font-size: 18px;
    }

    .am-cover-emoji {
        width: 100px;
    }

    .am-logo img {
        height: 44px;
    }
}

/* 소형 모바일 (480px) */
@media screen and (max-width: 480px) {
    .am-cover-content {
        height: 420px;
    }

    .am-banner-left {
        top: 170px;
        width: 120px;
        height: 115px;
    }

    .am-banner-right {
        top: 220px;
        width: 120px;
        height: 115px;
    }

    .am-phone-front {
        left: 12%;
        width: 58%;
    }

    .am-phone-back {
        left: 32%;
        width: 54%;
    }

    .am-cover-emoji {
        width: 50px;
        left: 10%;
        top: 22%;
    }

    .am-logo img {
        height: 28px;
    }

    .am-cover-subtitle {
        font-size: 10px;
    }

    .am-cover-header {
        gap: 6px;
        padding-top: 24px;
    }
}