/* 아이엠스트롱 덧붙임 (레퍼런스 스타일 위에 최소한만) */
.iam-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.iam-loader img{width:min(34vw,220px);height:auto;opacity:0;animation:iamLogo 3.2s .3s ease-in-out forwards}
@keyframes iamLogo{0%{opacity:0;transform:scale(.96)}25%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(.9)}}
#logo .iam-logo{display:block;width:100%;height:auto}
.iam-footer-logo{max-width:360px}
/* 구단 엠블럼은 사진이 아니므로 잘리지 않게 */
.iam-emblem{background:#F1F1F1!important;display:flex;align-items:center;justify-content:center}
.iam-emblem img{object-fit:contain!important;padding:14%}
.iam-emblem-text{font-family:coign-87-bold,sans-serif;font-size:5.2rem;line-height:1;color:#000016;text-transform:uppercase}
.iam-hide{display:none!important}
/* 큰 문장 판 길이를 레퍼런스와 같게: 레퍼런스 문장 폭(1440 기준 3032px, 3071px)만큼 자리를 잡고 가운데 둔다 */
@media (min-width:1024px){
  #section-4 [data-quote] h3{min-width:210.56vw;text-align:center}
  #section-8 [data-quote] h3{min-width:213.26vw;text-align:center}
}
/* 한글은 단어 중간에서 끊지 않는다 (영문 모양은 그대로) */
html[lang="ko"] body{word-break:keep-all;overflow-wrap:break-word}

/* ===== 한글은 한글 기준 (위치·크기·여백·움직임은 레퍼런스 그대로) ===== */
.ko{font-family:"Wanted Sans Variable","Wanted Sans",sans-serif!important;word-break:keep-all;overflow-wrap:break-word;letter-spacing:0;text-transform:none}
/* 본문 15px: 줄 간격 1.7, 굵기 400 */
.text-bodyS.ko,.text-bodyS .ko,[data-motion-paragraph] .ko,[data-motion-c2-paragraph] .ko{line-height:1.7!important;font-weight:400}
/* 큰 글 24px: 1.45 */
.text-bodyL.ko,.text-bodyL .ko{line-height:1.45!important;letter-spacing:-.01em;font-weight:500}
.text-bodyM.ko,.text-bodyM .ko{line-height:1.5!important}
/* 카드 큰 글 52px: 1.25 */
.text-h4.ko,.text-h4 .ko{line-height:1.25!important;letter-spacing:-.02em;font-weight:700}
/* 작은 꼬리표: 한글은 12px 아래로 내리지 않음 */
.text-smallS1.ko,.text-smallS2.ko,.text-smallM.ko,.text-smallS1 .ko,.text-smallS2 .ko,.text-smallM .ko{font-size:12px!important;line-height:1.4!important}
/* 바닥 사업자 정보: 문단이라 14px, 1.7 */
footer .text-smallM .ko{font-size:14px!important;line-height:1.7!important}
/* 마지막 섹션 큰 제목 */
#section-13 [data-title].ko{line-height:1.2!important;letter-spacing:-.03em}
/* 마지막 큰 제목: 한글은 글자 폭이 넓어 레퍼런스처럼 두 줄이 되도록 크기만 줄임 */
#section-13 [data-title].ko{font-size:11.4rem!important;line-height:1.2!important}
@media (min-width:1280px){#section-13 [data-title].ko{font-size:19rem!important}}
/* 카드 구역을 뺀 만큼 바닥 앞 빈 띠를 줄임 */
@media (min-width:1024px){#section-footer > hr.lg\:block{padding-top:12rem!important}}
/* 바닥 링크 한 칸 */
.iam-footer-links{grid-template-columns:1fr!important}
/* 회복의 공백: 넘기기 대신 한 장 */
.iam-single .embla-controls,.iam-single .embla-dots{display:none!important}
/* 바닥: 링크와 사업자 정보 사이 간격만 남김 */
footer > .site-grid:first-child{padding-bottom:6.4rem}
/* 한글 줄바꿈: 묶음 안에서는 넘기지 않고, PC·휴대폰 따로 끊는 자리 */
.nb{white-space:nowrap}
.br-pc,.br-m{display:none}
@media (min-width:1024px){.br-pc{display:inline}}
@media (max-width:1023px){.br-m{display:inline}}
.ko{text-wrap:pretty}
/* 큰 글·인용은 줄 길이를 고르게 */
.text-bodyL.ko,.text-h4.ko,.text-h4 .ko{text-wrap:balance}
.text-bodyL.ko{display:block}
/* 신념: 미션·비전 (2026-11-10 사용자 지시, 명사로 끝남) */
#section-6 .iam-mv .iam-mv-label{font-size:.72em;font-weight:500;line-height:1.4;padding-top:1.2rem;border-top:1px solid currentColor;margin:0 0 1.2rem}
#section-6 .iam-mv .iam-mv-label ~ .iam-mv-label{margin-top:4rem}
#section-6 .iam-mv .iam-mv-text{font-size:1.4em;font-weight:600;line-height:1.4;letter-spacing:-.02em;margin:0}
/* 앞으로: 큰 제목 줄 사이·아래 여백 줄임 (2026-11-10 사용자 지시) */
#section-13 [data-title].ko{line-height:1.15!important}
#section-13 [data-title].ko .word{vertical-align:top}
#section-6 .iam-mv .iam-mv-text{font-family:"Wanted Sans Variable","Wanted Sans",sans-serif}
/* 회복의 공백 카드: 글을 빼고 사진만 → 아래 여백을 위·옆과 같게 */
.iam-single > .pb-48{padding-bottom:1.6rem!important}
#section-6 .iam-mv > *{margin-top:0!important}
#section-6 .iam-mv .iam-mv-label{margin-bottom:1.6rem!important}
#section-6 .iam-mv .iam-mv-label ~ .iam-mv-label{margin-top:3.6rem!important}
#section-6 .iam-mv .iam-mv-text,#section-6 .iam-mv .iam-mv-text .ko{font-weight:600!important;line-height:1.4!important;letter-spacing:-.02em}
@media (min-width:1024px){#section-13 [data-motion-paragraph]{margin-top:-3.2rem}}
/* 휴대폰: 시작한 이유·K리그 두 번째 글 묶음(큰 글·사진·본문)을 왼쪽에 붙임 (2026-11-10 사용자 지시, PC는 그대로) */
@media (max-width:767px){#section-5 .col-start-2:has(>div>[data-motion-c2-title]),#section-9 .col-start-2:has(>div>[data-motion-c2-title]){grid-column:1 / -1!important}}
@media (min-width:768px) and (max-width:1023px){#section-5 .col-start-2:has(>div>[data-motion-c2-title]),#section-9 .col-start-2:has(>div>[data-motion-c2-title]){grid-column:1 / span 3!important}}
/* 휴대폰: 작게 보이던 사진(206×224 자리)을 다른 사진처럼 화면 폭 가득 (2026-11-10 사용자 지시, PC는 그대로) */
@media (max-width:767px){
  .col-span-3:has(>[data-motion-media]){grid-column:1 / -1!important}
  [data-motion-c2-media]{grid-column:1 / -1!important}
}
/* 휴대폰 고정 화면(큰 문장·갤러리)은 실제 화면 끝까지 채운다: 높이 고정으로 아래가 비지 않게 (카카오톡 막대가 숨을 때) */
@media (max-width:1023px){html.iam-lockvh #section-4,html.iam-lockvh #section-8,html.iam-lockvh #section-12{height:auto!important;top:0!important;bottom:0!important}}
@media (max-width:1023px){html.iam-lockvh #section-4 [data-quote],html.iam-lockvh #section-8 [data-quote]{height:calc(100 * var(--iam-vh))!important}}
@media (max-width:1023px){html.iam-lockvh #section-12 [data-gallery]{height:calc(100 * var(--iam-vh))!important}}
/* K리그 구단 엠블럼 벽 (2026-11-10 사용자 선택 A안): 밝은 바탕, 5개씩 두 줄, 스크롤에 따라 하나씩 나타남 */
.iam-crests{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:2.4rem;row-gap:4.8rem}
.iam-crest{display:flex;flex-direction:column;align-items:center;gap:1.6rem;opacity:0;transform:translateY(2.4rem);transition:opacity .6s ease-out,transform .6s cubic-bezier(.22,1,.36,1)}
.iam-crest.on{opacity:1;transform:none}
.iam-crest-img{display:flex;align-items:center;justify-content:center;height:15rem;width:100%}
.iam-crest-img img{max-height:100%;max-width:78%;width:auto;height:auto;object-fit:contain}
.iam-crest-name{font-size:1.5rem;font-weight:600;color:#000016;letter-spacing:-.01em;white-space:nowrap}
@media (max-width:1023px){.iam-crests{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:4rem;column-gap:1.6rem}.iam-crest-img{height:11rem}}
/* 휴대폰: 소개 문단과 카드 사이 여백 줄임 (2026-11-10 사용자 지시, 160px → 96px) */
@media (max-width:1023px){#section-3 > hr.lg\:hidden.pt-\[16rem\]{padding-top:9.6rem!important}}
/* 카드 섹션을 뺀 자리(2026-11-10): 소개 내용을 카드 자리로 옮겨 레퍼런스 카드 동선(아래에서 올라와 머문 뒤 왼쪽으로 빠짐)을 탄다. move-intro.cjs */

/* 소제목 영어·크게 (2026-11-10 사용자 지시: 너무 눈에 안 띔). 레퍼런스 소제목 글씨(대문자·굵게) 그대로, 크기만 1.5배 */
.iam-label-en .text-smallM{font-size:1.8rem;letter-spacing:.07rem}
.iam-label-en:before{height:1.1rem;width:1.1rem}
#section-6 .iam-mv .iam-mv-label{font-size:1.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.064rem}
@media (max-width:1023px){.iam-label-en .text-smallM{font-size:1.6rem}}
/* 카드 자리의 간격용 선(레퍼런스 코드가 높이를 잼)이 소개 뒤로 비쳐 보이던 것: 높이는 두고 보이지만 않게 */
#section-3.iam-s3intro > hr{visibility:hidden}
/* 큰 문장 화면이 들어올 때 덮는 조각과 화면 사이 1px 틈(어두운 영상이 세로선처럼 비침)을 막음 */
[data-skew-mask-in],[data-skew-mask-out]{margin-left:-2px;margin-right:-2px;width:calc(100vw + 4px)!important}
/* 휴대폰: 다음 화면이 시작되면 흰 판이 한 번에 덮으므로, 소개 문단이 화면 위쪽(머리글 근처)까지 올라간 뒤 덮이게 아래 여백을 둠 */
@media (max-width:1023px){#section-3.iam-s3intro{padding-bottom:calc(80 * var(--iam-vh, 1vh) - 9.6rem)}}