@charset "UTF-8";
/* ----------------------------------------------
 * HanbitSoft Infra Development Team
 * 아일리스 3차 업데이트 티저 Stylesheet - 기본 (리셋, 예약 클래스, 연출 변수)
 * Author - sgp8116@hanbitsoft.co.kr 261029
------------------------------------------------- */
/* 스타일 파일: index.html 이 아래 순서로 읽는다. 뒤 파일의 규칙이 앞 파일의 같은 우선순위 규칙을 덮으므로 순서를 바꾸지 않는다.
   그림 경로(url(../images/…))는 모든 파일이 css/ 바로 아래에 있다는 기준이다.
   base.css       리셋, 예약 클래스, 연출 변수(body: 섹션 공통값, 섹션별 타이밍, 패널 금색)
   common.css     globalnav, globalfooter, 로딩 표시
   section.css    섹션 공통(.section, 섹션 영상, 경계 그러데이션), 패널, 탭, 여러 섹션이 같이 쓰는 점등 키프레임
   hero.css · story.css · field.css · item.css · mission.css · character.css · raid.css
                  섹션마다 하나 (페이지 순서). mission.css 에는 원형 화살표와 크게 보기(lightbox)도 있다
-------------------------------------------------------------- */
/* CSS Reset
-------------------------------------------------------------- */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
strong,
small,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
select,
input,
button,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
figure,
figcaption {
    margin: 0;
    padding: 0;
    font-size: 100%;
}

img,
fieldset,
button {
    border: 0;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body,
input,
button,
textarea,
select,
table,
kbd {
    font-family:
        "Noto Serif KR",
        Malgun Gothic,
        "맑은고딕",
        "돋움",
        dotum,
        Helvetica,
        serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    line-height: 1.3;
    font-size: 16px;
    color: #000;
}

img {
    max-width: 100%;
    vertical-align: middle;
}

ol,
ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #000;
}

a:hover,
a:focus,
a:active {
    text-decoration: none;
    color: #333;
}

button,
label {
    cursor: pointer;
}

button {
    background: transparent;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption,
legend {
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    visibility: hidden;
}

/* Reserved Class
-------------------------------------------------------------- */
.blind {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    width: 1px;
    height: 1px;
}

/* 연출 변수 (섹션 공통값과 섹션별 타이밍. js/ 의 스크립트도 이 값을 읽는다)
-------------------------------------------------------------- */
body {
    background: #000;
    /* 섹션 공통 (story·field·item·mission·character·raid). js(video.js 재생기, section.js watchSection)는 섹션 래퍼(.story-video 등)의 계산값으로 읽으므로
       한 섹션만 다르게 하려면 그 래퍼에서 덮어쓴다 (story 의 --loop-fade). hero 는 맨 위를 벗어나면 바로 꺼져 보이는 비율을 안 쓴다. */
    --start-ratio: 0.6; /* 섹션이 처음 이만큼 보이면 영상·점등이 시작된다 (0~1). 1 에 가까울수록 스크롤을 더 내려야 시작돼 늦어진다 */
    --power-ratio: 0.6; /* 섹션이 이만큼 이상 보이면 켜지고, 덜 보이면 정전 (0~1) */
    --loop-fade: 1s; /* 루프 영상이 되감길 때 다음 복사본으로 디졸브하는 길이 */
    --loop-rate: 0.75; /* 루프 영상 재생 배속 (1 = 원래 속도, 0.5 = 절반). 1 은 너무 빠르다 */
    --tab-fade: 0.6s; /* 탭을 바꿀 때 새 영상·캐릭터가 디졸브돼 들어오는 길이 (field·character. 영상 묶음 .video-tab 과 캐릭터 층이 같이 쓴다) */
    --tab-slide: 0.25s; /* 선택 탭 배경이 옆 탭으로 미끄러지는 시간 (.tab-list) */
    --loading-delay: 0.8s; /* 영상을 다 받기를 이만큼 넘게 기다리면 화면 아래에 로딩 진행선(.loading)을 보인다. 보통 회선에서는 그 전에 다 받아 보이지 않는다 (js/video-load.js 로딩 표시) */
    --video-timeout: 4s; /* 영상은 다 받은 뒤에 트는데, 틀려고 한 때부터 첫 프레임이 그려지기까지(받기를 기다리는 시간 포함) 이만큼 지나면(느린 회선) 더 기다리지 않는다: 1회 영상은 건너뛰고(hero 는 정전 연출로), 루프 영상이면 정지 배경(마크업 data-poster) 위에서 연출을 진행한다. 0 이면 끝까지 기다린다 (js/video.js 시간 초과) */
    --off-filter: grayscale(1) brightness(0.18); /* 정전·점등 전 실루엣 모양 (hero 로고, 각 섹션의 패널·배경·캐릭터). 한 섹션만 다르게 하려면 .section-xxx 에서 덮어쓴다 */
    /* 패널 금색: 섹션 패널(.content-wrapper)의 기본 색이고, 패널 밖의 금색 장식(크게 보기 테두리·닫기, 로딩 진행선)도 같이 쓴다.
       패널마다 다르게 하려면 그 패널 래퍼에서 덮어쓴다 (field 는 하늘색) */
    --panel-light: #f6d282; /* 밝은 금색: 바깥 금테 하이라이트, 인용·캡션 글자, 점등 후광 */
    --panel-dark: #7d5311; /* 어두운 금색: 바깥 금테 그늘, 캡션 글자 */
    --panel-edge: #a57d37; /* 바깥 금테의 왼쪽·오른쪽 변 (위·아래 변 그러데이션의 0%·100% 지점 색) */
    --panel-glow: #ffecce; /* 크림색: 인용 글자 하이라이트, 점등 섬광·빛줄기 */
    --panel-fallback-bg: rgba(0, 0, 0, 0.7); /* 하위 브라우저(color-mix 를 모름)에서 패널 몸체 질감 대신 깔리는 검은 딤드 (section.css '섹션 패널'의 @supports not) */
    /* 섹션 경계: 켜진 섹션의 배경이 섹션 끝에서 잘려 정전된 이웃의 검은 면과 직선으로 만나지 않도록, 배경 층 위·아래에 검정 → 투명 그러데이션을 깐다
       (.section 의 --section-fade. 영상 래퍼·미션 배경은 ::after, item·raid 는 배경 ::before 의 윗 층). 패널·캐릭터는 어두워지지 않는다.
       두께는 섹션마다 .section-xxx 에서 덮어쓴다 (hero 위는 페이지 맨 위라, raid 아래는 globalfooter 의 그러데이션이 있어 0) */
    --section-fade-top: 180px; /* 섹션 위쪽 가장자리에서 검정이 투명해지는 두께 */
    --section-fade-bottom: 180px; /* 섹션 아래쪽 가장자리에서 투명이 검정이 되는 두께 */
    /* hero 정전 연출 타이밍: 1회 영상이 끝나면 즉시 검게 → 로고 → 루프 영상 순으로 켜고, globalnav 는 루프 영상이 나타나기 시작할 때 같이 켠다. 스크롤이 맨 위를 벗어나면 즉시 꺼지고 로고만 실루엣으로 남는다. */
    --hero-blackout-hold: 0.6s; /* 로고가 나타나기 전 완전히 검은 상태로 두는 시간 */
    --hero-logo-fade: 1.5s; /* 로고가 서서히 나타나는 시간 */
    --hero-loop-fade-in: 3s; /* 루프 영상이 서서히 나타나는 시간. 캐릭터 호흡 한 번(약 2.7s 리듬)에 맞춘 값 */
    --hero-nav-fade: 0.8s; /* globalnav 가 서서히 나타나는 시간 (루프 영상이 나타나기 시작할 때 같이 시작한다) */
    --nav-scroll-duration: 0.8s; /* globalnav 메뉴를 눌렀을 때 한 화면(100vh) 거리를 스크롤하는 시간. 더 멀면 거리의 제곱근에 비례해 늘되 두 배까지 (js/common.js Globalnav) */
    /* story 패널 점등: intro 가 loop 로 디졸브돼 온전히 보이면 바깥 금테가 그려지고, 몸체가 조명 켜지듯 나타난 뒤 글이 떠오른다.
       다른 섹션의 패널도 같은 순서로 켜지며 몸체·줄 시간은 이 값을 같이 쓴다 (금테 시간과 거기 맞물린 때만 섹션마다 아래에 따로). */
    --story-frame-draw: 0.9s; /* 바깥 금테가 왼쪽 위 모서리에서 시계 방향으로 그려지는 시간 */
    --story-panel-delay: 0.7s; /* 몸체가 켜지기 시작하는 때 (금테가 거의 다 그려진 뒤) */
    --story-panel-on: 1.4s; /* 몸체가 켜지며(섬광·후광·깜빡임) 안정되는 시간 */
    --story-panel-glint: 1.1s; /* 몸체 위로 빛줄기가 한 번 지나가는 시간 */
    --story-line-in: 0.6s; /* 본문 한 줄이 떠오르는 시간 */
    --story-line-start: 1.2s; /* 첫 줄이 떠오르기 시작하는 때 */
    --story-line-step: 0.12s; /* 줄과 줄 사이 간격 */
    /* field 점등: 영상이 다 들어오면 캐릭터가 켜지고, 조금 뒤 패널이 story 와 같은 순서(위 --story-* 값)로 켜진다. */
    --field-character-on: 0.8s; /* 캐릭터가 실루엣에서 섬광·깜빡임과 함께 켜지는 시간 */
    --field-halo-breathe: 4s; /* 켜진 뒤 캐릭터 후광이 밝아졌다 어두워지는 주기 */
    --field-panel-delay: 0.5s; /* 캐릭터가 켜지기 시작한 뒤 패널 점등(금테부터)이 시작되는 때 */
    /* field 탭 전환: 패널이 반대편으로 옮겨 갈 때 */
    --field-move-hold: 0.15s; /* 옮겨 가는 동안 꺼져 있는 시간 */
    --field-panel-relight: 0.4s; /* 옮겨 간 자리에서 깜빡이며 켜지는 시간 */
    /* item 점등: 섹션이 보이면 배경이 켜지고, 조금 뒤 패널이 story 와 같은 순서로 켜지며 아이템 아이콘이 하나씩 나타난다.
       패널이 story 보다 넓어(962px) 금테를 그리는 시간과 거기 맞물린 때만 따로 두고, 몸체·줄 시간은 위 --story-* 값을 같이 쓴다. */
    --item-bg-on: 0.8s; /* 배경이 실루엣에서 섬광·깜빡임과 함께 켜지는 시간 */
    --item-panel-delay: 0.5s; /* 배경이 켜지기 시작한 뒤 패널 점등(금테부터)이 시작되는 때 */
    --item-frame-draw: 1.1s; /* 바깥 금테가 그려지는 시간. story(0.9s)와 선 속도가 같도록 둘레 비율로 늘린 값 */
    --item-body-delay: 0.85s; /* 금테가 그려지기 시작한 뒤 몸체가 켜지기 시작하는 때 (거의 다 그려진 뒤. story 의 --story-panel-delay 에 해당) */
    --item-line-start: 1.35s; /* 금테가 그려지기 시작한 뒤 첫 줄이 떠오르기 시작하는 때 (story 의 --story-line-start 에 해당) */
    --item-icon-lag: 0.15s; /* 아이템 줄이 떠오르기 시작한 뒤 아이콘이 나타나기 시작하는 때 */
    --item-icon-on: 0.7s; /* 아이콘이 섬광과 함께 커졌다 자리 잡는 시간 */
    --item-icon-float: 4s; /* 켜진 뒤 아이콘이 떠올랐다 내려오는 주기 */
    /* mission 점등: item 과 같은 순서(배경 깜빡 점등 → 패널 금테 → 몸체 → 줄). 패널이 item 보다 커(962×645) 금테를 그리는 시간과
       거기 맞물린 때만 따로 두고, 몸체·줄 시간은 위 --story-* 값을 같이 쓴다. */
    --mission-bg-on: 0.8s; /* 배경이 실루엣에서 섬광·깜빡임과 함께 켜지는 시간 */
    --mission-panel-delay: 0.5s; /* 배경이 켜지기 시작한 뒤 패널 점등(금테부터)이 시작되는 때 */
    --mission-frame-draw: 1.2s; /* 바깥 금테가 그려지는 시간. 둘레 3222px. story(0.9s, 2440px)·item(1.1s, 3020px)과 선 속도가 같도록 */
    --mission-body-delay: 0.9s; /* 금테가 그려지기 시작한 뒤 몸체가 켜지기 시작하는 때 (거의 다 그려진 뒤) */
    --mission-line-start: 1.45s; /* 금테가 그려지기 시작한 뒤 첫 줄이 떠오르기 시작하는 때 */
    /* character 점등: 선택된 탭의 영상이 다 들어오면 --character-panel-delay 뒤 패널이 story 와 같은 순서로 켜진다.
       처음 보이는 탭의 패널이 story 보다 짧아(552×551) 금테를 그리는 시간과 거기 맞물린 때만 따로 두고, 몸체·줄 시간은 위 --story-* 값을 같이 쓴다. */
    --character-panel-delay: 0.5s; /* 영상이 다 들어온 뒤 패널 점등(금테부터)이 시작되는 때 */
    --character-frame-draw: 0.82s; /* 바깥 금테가 그려지는 시간. 둘레 2214px. story(0.9s, 2440px)와 선 속도가 같도록 */
    --character-body-delay: 0.64s; /* 금테가 그려지기 시작한 뒤 몸체가 켜지기 시작하는 때 (거의 다 그려진 뒤. story 의 --story-panel-delay 에 해당) */
    --character-line-start: 1.1s; /* 금테가 그려지기 시작한 뒤 첫 줄이 떠오르기 시작하는 때 (story 의 --story-line-start 에 해당) */
    /* raid 점등: item·mission 과 같은 순서(배경 깜빡 점등 → 패널 금테 → 몸체 → 줄). 패널이 story 보다 짧아(552×504) 금테를 그리는 시간과
       거기 맞물린 때만 따로 두고, 몸체·줄 시간은 위 --story-* 값을 같이 쓴다. */
    --raid-bg-on: 0.8s; /* 배경이 실루엣에서 섬광·깜빡임과 함께 켜지는 시간 */
    --raid-panel-delay: 0.5s; /* 배경이 켜지기 시작한 뒤 패널 점등(금테부터)이 시작되는 때 */
    --raid-frame-draw: 0.78s; /* 바깥 금테가 그려지는 시간. 둘레 2120px. story(0.9s, 2440px)와 선 속도가 같도록 */
    --raid-body-delay: 0.6s; /* 금테가 그려지기 시작한 뒤 몸체가 켜지기 시작하는 때 (거의 다 그려진 뒤. story 의 --story-panel-delay 에 해당) */
    --raid-line-start: 1.05s; /* 금테가 그려지기 시작한 뒤 첫 줄이 떠오르기 시작하는 때 (story 의 --story-line-start 에 해당) */
}