@charset "utf-8";
/* 추구하는 방향 페이지 전용 스타일 (공통은 fl-sub.css).
   메인 '프레쉬랩이 추구하는 방향'(영문 + 선 + 회전 아이콘)을 목차로 이어 받고,
   기준마다 큰 번호(좌우 번갈아)·제목·설명 아래를 아이콘 카드 3 / 사진 카드 2 / 딥그린 사진 패널로 다르게 구성한다. */

#container > #sub-direction { background: var(--fl-cream); }
#sub-direction { --fl-dir-gap: clamp(100px, 10vw, 160px); color: var(--fl-ink); }
#sub-direction p, #sub-direction h3, #sub-direction span, #sub-direction li { word-break: keep-all; overflow-wrap: break-word; }
body:has(#sub-direction) { background: var(--fl-cream) !important; } /* gw.css 의 body #f8f8f8 !important 를 이 페이지에서만 덮는다 */
body:has(#sub-direction) #container_wr, body:has(#sub-direction) .gw-footer-container { background: var(--fl-cream); }
#sub-direction .fl-dir-item { scroll-margin-top: calc(var(--fl-hd-total) + 16px); }

/* ---------- 목차: 영문 + 선 + 회전 아이콘 ---------- */
#sub-direction .fl-dir-index { padding: clamp(72px, 7vw, 112px) 0 var(--fl-dir-gap); }
#sub-direction .fl-dir-index-head { margin-bottom: clamp(48px, 5vw, 72px); text-align: center; }
#sub-direction .fl-dir-index-title { font-size: clamp(26px, 3vw, 42px); font-weight: 800; line-height: 1.35; letter-spacing: -0.035em; color: var(--fl-dark); }
#sub-direction .fl-dir-index-list { border-top: 2px solid var(--fl-dark); }
#sub-direction .fl-dir-index-list li { border-bottom: 1px solid var(--fl-line); }
#sub-direction .fl-dir-index-link {
    display: grid; grid-template-columns: 56px auto minmax(40px, 1fr) auto auto; align-items: center; gap: clamp(16px, 2vw, 32px);
    padding: clamp(20px, 2.4vw, 32px) 8px; text-decoration: none;
}
#sub-direction .fl-dir-index-no { font-family: var(--fl-font-display); font-size: 17px; font-weight: 600; color: var(--fl-mango); }
#sub-direction .fl-dir-index-en {
    font-family: var(--fl-font-display); font-size: clamp(40px, 5.2vw, 80px); font-weight: 700; line-height: 1; text-transform: uppercase;
    color: var(--fl-dark); white-space: nowrap; transition: color .25s ease;
}
#sub-direction .fl-dir-index-line { height: 0; border-top: 3px solid var(--fl-dark); transform-origin: left center; transition: border-color .25s ease; }
#sub-direction .fl-dir-index-ko { font-size: clamp(16px, 1.4vw, 19px); font-weight: 700; color: var(--fl-ink-2); white-space: nowrap; }
#sub-direction .fl-dir-index-ico { width: clamp(44px, 4.4vw, 64px); height: clamp(44px, 4.4vw, 64px); object-fit: contain; animation: fl-dir-spin 14s linear infinite; }
#sub-direction .fl-dir-index-list li:nth-child(2) .fl-dir-index-ico { animation-direction: reverse; }
#sub-direction .fl-dir-index-link:hover .fl-dir-index-en { color: var(--fl-primary); }
#sub-direction .fl-dir-index-link:hover .fl-dir-index-line { border-color: var(--fl-primary); }
@keyframes fl-dir-spin { from { rotate: 0deg; } to { rotate: 360deg; } }

/* ---------- 기준별 상세 (레퍼런스: 에비스 브랜드 페이지의 01·02·03) ---------- */
#sub-direction .fl-dir-item { padding-bottom: var(--fl-dir-gap); }
/* 머리: 큰 번호 | 영문·제목·설명. 02 는 좌우를 뒤집는다 */
#sub-direction .fl-dir-item-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; align-items: start; margin-bottom: clamp(48px, 5vw, 72px); }
#sub-direction .fl-dir-item-head.is-reverse { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
#sub-direction .fl-dir-item-head.is-reverse .fl-dir-item-num { order: 2; text-align: right; }
#sub-direction .fl-dir-item-num { overflow: hidden; font-family: var(--fl-font-display); font-size: clamp(96px, 11vw, 176px); font-weight: 700; line-height: .9; color: var(--fl-primary); }
#sub-direction .fl-dir-item-num > span { display: inline-block; }
#sub-direction .fl-dir-item-en { font-family: var(--fl-font-display); font-size: 20px; font-weight: 600; text-transform: uppercase; color: var(--fl-mango); }
#sub-direction .fl-dir-item-title { margin-top: 12px; font-size: clamp(30px, 3.4vw, 48px); font-weight: 800; line-height: 1.25; letter-spacing: -0.035em; color: var(--fl-dark); }
#sub-direction .fl-dir-item-desc { margin-top: 24px; max-width: 640px; font-size: 17px; line-height: 1.85; color: var(--fl-ink-2); }

/* 01: 사진 카드 3개 — 사진 위 딤, 제목·설명은 왼쪽 아래 */
#sub-direction .fl-dir-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#sub-direction .fl-dir-cards li { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(360px, 30vw, 440px); padding: 32px 28px; border-radius: 28px; background: var(--fl-dark); }
#sub-direction .fl-dir-cards img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
#sub-direction .fl-dir-cards li::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(30, 53, 39, .15) 20%, rgba(30, 53, 39, .85) 100%); }
#sub-direction .fl-dir-cards li:hover img { transform: scale(1.06); }
#sub-direction .fl-dir-cards h4 { font-size: 22px; font-weight: 800; color: var(--fl-white); }
#sub-direction .fl-dir-cards p { margin-top: 10px; font-size: 16px; line-height: 1.7; color: color-mix(in srgb, var(--fl-cream) 88%, transparent); }

/* 02: 테두리 없이 엇갈린 사진 2장 — 같은 크기(4:5) 사진 2장을 오른쪽만 아래로 내려 엇갈리게 배치. 글은 사진 아래 */
#sub-direction .fl-dir-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); align-items: start; }
#sub-direction .fl-dir-photos li:nth-child(2) { margin-top: clamp(80px, 10vw, 160px); }
#sub-direction .fl-dir-photo { display: block; text-decoration: none; }
#sub-direction .fl-dir-photo-img { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 28px; background: var(--fl-primary-soft); }
#sub-direction .fl-dir-photo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
#sub-direction .fl-dir-photo-body { display: flex; flex-direction: column; gap: 10px; padding: 28px 4px 0; }
#sub-direction .fl-dir-photo-no { font-family: var(--fl-font-display); font-size: 16px; font-weight: 600; text-transform: uppercase; color: var(--fl-mango); }
#sub-direction .fl-dir-photo-title { font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -0.03em; color: var(--fl-dark); }
#sub-direction .fl-dir-photo-desc { font-size: 16px; line-height: 1.75; color: var(--fl-ink-2); }
#sub-direction .fl-dir-photo-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--fl-primary); }
#sub-direction .fl-dir-photo-more i { transition: transform .3s ease; }
#sub-direction .fl-dir-photo:hover .fl-dir-photo-img img { transform: scale(1.05); }
#sub-direction .fl-dir-photo:hover .fl-dir-photo-more i { transform: translateX(6px); }

/* 03: 배경 없이 원형 사진 3개 — 가운데는 조금 내려 물결처럼, 번호 배지는 원 아래 가장자리에 걸침 */
#sub-direction .fl-dir-circles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); text-align: center; }
#sub-direction .fl-dir-circles li { display: flex; flex-direction: column; align-items: center; }
#sub-direction .fl-dir-circles li:nth-child(2) { margin-top: clamp(40px, 5vw, 80px); }
#sub-direction .fl-dir-circle-img { display: block; overflow: hidden; width: min(100%, 320px); aspect-ratio: 1; border-radius: 50%; background: var(--fl-primary-soft); }
#sub-direction .fl-dir-circle-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
#sub-direction .fl-dir-circles li:hover .fl-dir-circle-img img { transform: scale(1.08); }
#sub-direction .fl-dir-circle-no {
    position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-top: -28px;
    border: 4px solid var(--fl-cream); border-radius: 50%; background: var(--fl-mango); color: var(--fl-white);
    font-family: var(--fl-font-display); font-size: 20px; font-weight: 700;
}
#sub-direction .fl-dir-circles h4 { margin-top: 18px; font-size: 21px; font-weight: 800; color: var(--fl-dark); }
#sub-direction .fl-dir-circles p { margin-top: 10px; font-size: 16px; line-height: 1.7; color: var(--fl-ink-2); }

/* ---------- 등장 애니메이션 ---------- */
/* "stay": 상자 자체는 제자리, 안쪽 요소가 차례로 움직인다 */
.fl-reveal-on #sub-direction [data-fl-reveal="stay"]:not(.is-in) { opacity: 1; transform: none; }
/* 큰 번호: 가려진 틀 아래에서 솟아오름 */
#sub-direction .fl-dir-item-num > span { transition: transform 1.1s cubic-bezier(.22, .8, .24, 1); }
.fl-reveal-on #sub-direction .fl-dir-item-head:not(.is-in) .fl-dir-item-num > span { transform: translateY(105%); }
/* 영문 → 제목 → 설명 순서로 떠오름 */
#sub-direction .fl-dir-item-copy > * { transition: opacity .9s ease, transform .9s cubic-bezier(.22, .8, .24, 1); }
#sub-direction .fl-dir-item-copy > :nth-child(2) { transition-delay: .12s; }
#sub-direction .fl-dir-item-copy > :nth-child(3) { transition-delay: .24s; }
.fl-reveal-on #sub-direction .fl-dir-item-head:not(.is-in) .fl-dir-item-copy > * { opacity: 0; transform: translateY(28px); }
/* 02 사진: 위에서 아래로 걷히듯 드러남 */
#sub-direction .fl-dir-photo-img { transition: clip-path 1.2s cubic-bezier(.22, .8, .24, 1) .2s; }
.fl-reveal-on #sub-direction .fl-dir-photos li:not(.is-in) .fl-dir-photo-img { clip-path: inset(0 0 100% 0); }
.fl-reveal-on #sub-direction .fl-dir-photos li:nth-child(2) .fl-dir-photo-img { transition-delay: .35s; }
/* 03 원형 사진: 조금 작게 시작해 차례로 커지며 나타남 */
.fl-reveal-on #sub-direction .fl-dir-circles li:not(.is-in) { transform: scale(.85) translateY(40px); }
.fl-reveal-on #sub-direction .fl-dir-circles li:nth-child(2) { transition-delay: .15s; }
.fl-reveal-on #sub-direction .fl-dir-circles li:nth-child(3) { transition-delay: .3s; }

@media (max-width: 1024px) {
    #sub-direction .fl-dir-index-link { grid-template-columns: 40px auto minmax(24px, 1fr) auto; }
    #sub-direction .fl-dir-index-ko { display: none; }
    #sub-direction .fl-dir-item-head, #sub-direction .fl-dir-item-head.is-reverse { grid-template-columns: 1fr; gap: 20px; }
    #sub-direction .fl-dir-item-head.is-reverse .fl-dir-item-num { order: 0; text-align: left; }
    #sub-direction .fl-dir-cards { grid-template-columns: 1fr; }
    #sub-direction .fl-dir-cards li { min-height: 300px; }
    #sub-direction .fl-dir-circles { grid-template-columns: 1fr; gap: 48px; }
    #sub-direction .fl-dir-circles li:nth-child(2) { margin-top: 0; }
    #sub-direction .fl-dir-circle-img { width: min(80%, 300px); }
    #sub-direction .fl-dir-photos { grid-template-columns: 1fr; gap: 48px; }
    #sub-direction .fl-dir-photos li:nth-child(2) { margin-top: 0; }
    #sub-direction .fl-dir-photo-img { aspect-ratio: 4 / 3; }
}
@media (max-width: 576px) {
    #sub-direction .fl-dir-index-link { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; padding: 18px 2px; }
    #sub-direction .fl-dir-index-line { display: none; }
    #sub-direction .fl-dir-index-en { font-size: clamp(28px, 9vw, 40px); white-space: normal; }
    #sub-direction .fl-dir-item-desc { font-size: 16px; }
    #sub-direction .fl-dir-cards li { min-height: 260px; padding: 24px 22px; border-radius: 24px; }
    #sub-direction .fl-dir-cards h4 { font-size: 20px; }
    #sub-direction .fl-dir-cards p { font-size: 15px; }
    #sub-direction .fl-dir-photo-img { border-radius: 24px; }
    #sub-direction .fl-dir-photo-body { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    #sub-direction .fl-dir-index-ico { animation: none; }
    #sub-direction .fl-dir-photo-img img, #sub-direction .fl-dir-circle-img img, #sub-direction .fl-dir-photo-more i, #sub-direction .fl-dir-cards img { transition: none; }
}