/* IRONBRICK 소개 페이지
 *
 * 색은 게임에서 그대로 가져왔다(ProtoArt.cs 의 ProtoPalette).
 * 사이트와 앱이 따로 놀면 스토어에서 넘어온 사람이 같은 물건인지 헷갈린다.
 *
 * 프레임워크를 쓰지 않는다. 페이지가 언어당 두 장뿐이고 전부 정적이라
 * 런타임 JS 가 할 일이 없다. 빌드 산출물이 그대로 nginx 웹루트로 간다.
 */

:root {
    --bg-top: #1b2547;
    --bg-bottom: #070a13;
    --panel: #161e36;
    --wall: #33406b;
    --mint: #5eead4;
    --coin: #f0b84f;
    --text: #dce4f5;
    --dim: #6c7ba0;
    --danger: #ff5c72;

    --max: 1080px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    /* 한글·일본어·라틴을 한 스택으로. 기기에 있는 것을 쓰므로 웹폰트를 받지 않는다 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR",
                 "Noto Sans JP", "Apple SD Gothic Neo", "Hiragino Sans",
                 "Malgun Gothic", Roboto, sans-serif;
    color: var(--text);
    background: var(--bg-bottom);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--mint); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 가로 여백만 준다. `padding: 0 24px` 로 쓰면 <section class="wrap"> 에서
 * 클래스가 `section { padding }` 을 특이도로 이겨 **세로 여백이 통째로 사라진다.**
 * 축을 나눠 쓰면 두 규칙이 서로 다른 속성을 건드리므로 부딪히지 않는다. */
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: 24px; }

/* 본문 줄간격(1.7)은 문단용이다. 제목이 그대로 물려받으면 두 줄짜리 제목의
 * 줄이 떠 보이고, 제목과 아래 내용의 간격도 가늠이 안 된다. */
h1, h2, h3 { line-height: 1.25; }

/* ── 머리말 ───────────────────────────────────────────── */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--text);
}
.brand img { width: 30px; height: 30px; border-radius: 7px; display: block; }
.brand:hover { text-decoration: none; }

.langs { display: flex; gap: 6px; }
.langs a {
    padding: 5px 11px;
    border: 1px solid var(--wall);
    border-radius: 999px;
    font-size: 13px;
    color: var(--dim);
}
.langs a:hover { color: var(--text); text-decoration: none; }
.langs a[aria-current="true"] {
    color: var(--bg-bottom);
    background: var(--mint);
    border-color: var(--mint);
    font-weight: 700;
}

/* ── 히어로 ───────────────────────────────────────────── */

.hero {
    background:
        radial-gradient(1100px 520px at 50% -18%, rgba(94, 234, 212, 0.13), transparent 62%),
        linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
    border-bottom: 1px solid rgba(51, 64, 107, 0.55);
}

.hero-inner {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 48px;
    align-items: center;
    padding: 56px 0 72px;
}

/* 접힘선 맨 위 한 줄. 뭐부터 읽어야 하는지 알려 주고, 아직 안 나온
 * 물건이라는 사실을 제목보다 먼저 밝힌다. */
.eyebrow,
.section-label {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mint);
}


.hero h1 {
    margin: 0 0 6px;
    font-size: clamp(44px, 9vw, 84px);
    line-height: 0.98;
    letter-spacing: -0.02em;
    font-weight: 900;
}
/* 워드마크의 민트 블록. 게임 메인화면의 IRON / ■BRICK 을 옮겨 왔다 */
.hero h1 .mark {
    display: inline-block;
    width: 0.42em;
    height: 0.42em;
    margin-right: 0.16em;
    border-radius: 0.1em;
    background: var(--mint);
    vertical-align: 0.06em;
}

.tagline {
    margin: 20px 0 6px;
    font-size: clamp(20px, 3.4vw, 27px);
    font-weight: 700;
    line-height: 1.35;
}
.sub { margin: 0; color: var(--dim); font-size: clamp(15px, 2.2vw, 18px); line-height: 1.55; }

/* 붉은 점선 = 게임 속 방어선 */
.defense-line {
    margin: 32px 0 26px;
    border: 0;
    border-top: 2px dashed rgba(255, 92, 114, 0.6);
}

.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: 12px;
    border: 1px solid var(--wall);
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}
.btn:hover { text-decoration: none; }

/* 화면에서 채워진 것은 하나뿐이어야 어디를 눌러야 하는지가 즉시 읽힌다.
 * 게임 메인화면의 "게임 시작" 버튼과 같은 규칙이다. */
.btn-primary {
    background: var(--mint);
    border-color: var(--mint);
    color: #0a1220;
    box-shadow: 0 10px 30px rgba(94, 234, 212, 0.22);
}
.btn-primary:hover { filter: brightness(1.06); }

/* 주소가 아직 없는 스토어. 눌러서 404 를 보여주느니 잠가 두고 이유를 적는다. */
/* "준비 중" 을 아래로 쌓으면 옆 버튼보다 높아져 두 개가 어긋나 보인다.
 * 한 줄에 붙여 높이를 맞춘다. */
.btn-soon { opacity: 0.55; cursor: default; }
.btn-soon em {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dim);
    border-left: 1px solid var(--wall);
    padding-left: 9px;
    margin-left: 1px;
}

.cta-center { justify-content: center; }

.note { margin: 16px 0 0; color: var(--dim); font-size: 14px; }

.hero-shot { justify-self: center; }
.hero-shot img {
    width: 100%;
    max-width: 300px;
    /* height:auto 가 반드시 있어야 한다. <img> 에 width/height 속성을 주고
     * CSS 로 폭만 줄이면, 높이는 속성값(1300px)이 그대로 쓰여 그림이 세로로
     * 늘어난다. 속성은 레이아웃 밀림을 막으려고 넣은 것이지 실제 크기가 아니다. */
    height: auto;
    border-radius: 22px;
    border: 1px solid var(--wall);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    display: block;
}

/* ── 본문 ─────────────────────────────────────────────── */

section { padding-block: 76px; }
h2 {
    margin: 0 0 32px;
    font-size: clamp(22px, 3.4vw, 29px);
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* ── 한 턴 (움직이는 화면) ───────────────────────────── */

/* 글이 왼쪽, 영상이 오른쪽. 영상을 먼저 큰 화면에 두면 글을 안 읽고,
 * 글만 있으면 안 와닿는다. 나란히 두고 같이 읽히게 한다. */
.clip-section {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 52px;
    align-items: center;
}
.clip-text h2 { margin-bottom: 16px; }
.clip-text p { margin: 0; color: var(--dim); font-size: 16px; line-height: 1.75; max-width: 46ch; }
.clip-media img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 20px;
    border: 1px solid var(--wall);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    display: block;
    margin: 0 auto;
}

/* ── 무엇이 다른가 ───────────────────────────────────── */

.why {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 34px 30px;
}
/* 카드로 감싸지 않는다. 여기는 이 페이지에서 가장 중요한 세 문단이라
 * 테두리로 가두는 것보다 숫자를 세워 두는 편이 눈에 먼저 든다. */
.why-item { border-top: 2px solid var(--wall); padding-top: 20px; }
.why-item .stat {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--coin);
    font-variant-numeric: tabular-nums;
}
.why-item h3 { margin: 0 0 10px; font-size: 19px; font-weight: 700; }
.why-item p { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.7; }

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
    gap: 18px;
}
.card {
    background: var(--panel);
    border: 1px solid rgba(51, 64, 107, 0.75);
    border-radius: 16px;
    padding: 24px;
}
.card { padding: 26px 24px 28px; }
.card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--mint); }
.card p { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.65; }

.shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px;
}
.shot figure { margin: 0; }
.shot img {
    width: 100%;
    height: auto;               /* 위와 같은 이유 — 없으면 세로로 늘어난다 */
    border-radius: 16px;
    border: 1px solid var(--wall);
    display: block;
}
.shot figcaption {
    margin-top: 14px;
    color: var(--dim);
    font-size: 13px;
    text-align: center;
}

/* ── 자주 묻는 것 ────────────────────────────────────── */

/* <details> 라서 자바스크립트가 없다. FAQ 하나 때문에 스크립트를 얹지 않는다. */
.faq { max-width: 760px; }
.faq-item { border-bottom: 1px solid rgba(51, 64, 107, 0.7); }
.faq-item summary {
    padding: 18px 0;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* 접힘 표시는 문자로 만든다. 아이콘 파일을 하나 더 받게 할 일이 아니다. */
.faq-item summary::after {
    content: "+";
    color: var(--mint);
    font-weight: 400;
    font-size: 21px;
    line-height: 1;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
    margin: 0 0 20px;
    color: var(--dim);
    font-size: 15px;
    line-height: 1.75;
    max-width: 62ch;
}

/* ── 마무리 ──────────────────────────────────────────── */

.closing { text-align: center; }
.closing h2 { margin-bottom: 12px; }
.closing p { margin: 0 auto 26px; color: var(--dim); max-width: 46ch; }

/* ── 꼬리말 ───────────────────────────────────────────── */

footer {
    border-top: 1px solid rgba(51, 64, 107, 0.55);
    padding: 30px 0 46px;
    color: var(--dim);
    font-size: 14px;
}
.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    align-items: center;
    justify-content: space-between;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }

/* ── 개인정보 처리방침 본문 ───────────────────────────── */

/* 처리방침 머리말 — 소개 페이지의 히어로를 낮게 눌러 재사용한다 */
.hero-inner.doc-head { grid-template-columns: 1fr; padding: 28px 0 34px; }
.doc-title { font-size: clamp(28px, 5vw, 42px); margin: 0 0 10px; }

.doc { max-width: 760px; }

/* 항목 제목은 앞 내용에서 확실히 떨어져야 목차처럼 읽힌다.
 * :first-of-type 으로 첫 h2 의 위 여백을 지우지 않는다 — 문서가 개요 문단으로
 * 시작하므로, 지우면 1번 항목이 개요에 달라붙는다. */
.doc h2 { margin: 44px 0 16px; font-size: 21px; }

/* 법적 문서는 오래 읽는다. 본문보다 줄간격을 조금 더 준다. */
.doc p, .doc li { color: var(--dim); font-size: 15px; line-height: 1.75; }
.doc p { margin: 0 0 14px; }
.doc ul { padding-left: 20px; margin: 0 0 14px; }
.doc li { margin-bottom: 8px; }

.table-scroll { overflow-x: auto; margin: 18px 0 22px; }
.doc table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.doc th, .doc td {
    border: 1px solid rgba(51, 64, 107, 0.75);
    padding: 9px 12px;
    text-align: left;
    vertical-align: top;
}
.doc th { background: var(--panel); color: var(--text); font-weight: 700; }
.doc td { color: var(--dim); }
.updated { color: var(--dim); font-size: 13px; margin-top: 0; }

/* ── 좁은 화면 ────────────────────────────────────────── */

@media (max-width: 760px) {
    .hero-inner { grid-template-columns: 1fr; gap: 34px; padding: 36px 0 52px; }
    .hero-shot { order: -1; }
    .hero-shot img { max-width: 232px; margin: 0 auto; }
    section { padding-block: 52px; }
    .topbar { flex-direction: column; align-items: flex-start; gap: 12px; }

    /* 영상이 글보다 먼저 온다. 좁은 화면에서는 스크롤을 멈출 이유가
     * 글보다 움직임에서 나온다. */
    .clip-section { grid-template-columns: 1fr; gap: 28px; }
    .clip-media { order: -1; }
    .why { gap: 28px; }
    .cta { flex-direction: column; align-items: stretch; text-align: center; }
    .cta .note { text-align: center; }
}

/* ── 섹션 라벨 ────────────────────────────────────────────
 *
 * 선택자가 `p.section-label` 인 이유: `.clip-text p` · `.closing p` 처럼
 * 문단에 색과 여백을 주는 규칙이 (클래스 1 + 요소 1) 이라 클래스 하나짜리
 * `.section-label` 보다 세다. 순서를 뒤로 옮겨도 지는 싸움이었다.
 * 요소를 하나 붙여 특이도를 맞추고, 파일 끝에 두어 동점에서 이기게 한다.
 * 실제로 이걸 안 해서 라벨이 회색으로 칠해지고 여백도 어긋났다. */
p.section-label {
    color: var(--mint);
    margin: 0 0 8px;
}

/* 화면 낭독기 전용 */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}