@import url(https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css);
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquareNeo@1.0/nanumsquareneo.css);
@import url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css);

/* ========================================
   변수
   ======================================== */
:root {
  /* 레이아웃 — 전체 탭 기준 페이지 1920 × 2125 (히어로 2038 + 푸터 87).
     히어로 높이는 고정값이 아니라 흐름으로 결정된다:
     패널 위 여백 523.7 + 패널 높이(콘텐츠 추종) + 아래 여백 129.3.
     탭 필터로 패널이 짧아지면 빈 여백 없이 푸터가 바로 따라온다. */
  --page-width: 1920px;
  --footer-height: 87px;

  /* 가로 스크롤이 시작되는 폭.
     1920 은 배경 여백까지 포함한 값이고 실제 콘텐츠는 그보다 좁으므로,
     가용폭이 부족하면 좌우 배경 여백을 대칭으로 잘라내며 버틴다.
     (덕분에 1920 모니터에서 세로 스크롤바가 15~17px 를 먹어도 가로 스크롤이 없다)

     한계값은 콘텐츠 좌우에 16px 여백을 남기는 지점으로 잡았다.
       악기 패널 좌측: (W - 1920) / 2 + 105.87 >= 16  ->  W >= 1740.26
       악기 패널 우측: W / 2 - 853.87 >= 16           ->  W >= 1739.74
     헤더 로고(left 76)는 1768 부터 여백이 16 미만이 되므로 .header-inner 를
     -60px 에서 멈춰 로고가 항상 16px 이상 떨어지게 한다.
     이보다 좁아지면 가로 스크롤로 넘긴다. */
  --page-min-width: 1740px;

  /* 배경 패널 (Figma Rectangle 634) — html 바깥 여백 배경과 값을 공유한다.
     그라데이션 아래는 단색 블록(Rectangle 635, #d5e6fc)이 히어로 끝까지 이어진다 */
  --panel-top: 433.57px;
  --panel-height: 1031.43px;

  /* 색상 */
  --color-hero-from: #bee2f0;
  --color-hero-to: #cdd0f1;
  --color-panel-from: #ffffff;
  --color-panel-to: #d5e5fb;
  --color-panel-solid: #d5e6fc;
  --color-card-panel: #f7fbff;
  --color-card-bg: #b7e4f7;
  --color-card-thumb: #ffffff;
  --color-card-label: #171719;
  --color-tab-on: #00b2ff;
  --color-tab-off: #b7e4f7;
  --color-tab-on-text: #ffffff;
  --color-tab-off-text: #008ecc;
  --color-sub-title: #00b2ff;
  --color-footer-bg: #5b5b5b;
  --color-footer-text: #ffffff;

  /* 폰트 굵기 */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-extrabold: 800;
}

/* ========================================
   기본 스타일
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 페이지보다 뷰포트가 길 때 드러나는 영역 */
html {
  background-color: var(--color-footer-bg);
}

/* 배경(헤더 바 · 히어로 그라데이션 · 배경 패널 · 푸터)은 화면 끝까지 채우고,
   콘텐츠만 1920 폭으로 가운데 정렬한다. 1920 미만에서는 가로 스크롤. */
body {
  min-width: var(--page-min-width);
  position: relative;
  font-family:
    "NanumSquareNeo",
    "Pretendard Variable",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Malgun Gothic",
    "맑은 고딕",
    sans-serif;
  color: var(--color-card-label);
}

img {
  display: block;
  max-width: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ========================================
   헤더
   ======================================== */
#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-width: var(--page-min-width);
  height: 64px;
  /* Figma: #fff 레이어에 opacity 0.7 → 그림자 알파도 함께 감쇄 */
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 4px rgba(120, 120, 120, 0.14);
  overflow: hidden;
  z-index: 10;
}

/* 1920 폭을 유지하며 가운데 정렬하되, 좌측을 -60px 에서 멈춘다.
   로고가 left 76 이라 여기서 멈추면 로고 여백이 항상 16px 이상 유지된다.
   헤더 우측에는 아무것도 없으므로 남는 폭이 잘려도 무해하다. */
.header-inner {
  position: absolute;
  top: 0;
  left: max(-60px, calc((100% - var(--page-width)) / 2));
  width: var(--page-width);
  height: 100%;
}

.header-logo {
  position: absolute;
  left: 76px;
  top: 8.93px;
  width: 160px;
  height: 47px;
}

.header-logo img {
  width: 100%;
  height: 100%;
}

/* ========================================
   히어로 영역
   ======================================== */
/* 높이는 흐름으로 결정된다 (.hero-inner → 악기 패널 + 상하 여백).
   전체 탭에서 시안 값 2038 이 나온다. */
#hero {
  position: relative;
  width: 100%;
  min-width: var(--page-min-width);
  background-image: linear-gradient(
    180deg,
    var(--color-hero-from) 0%,
    var(--color-hero-to) 100%
  );
  overflow: hidden;
}

/* 1920 콘텐츠 박스 — 히어로 안의 절대 배치 요소들의 기준.
   흐름에 참여해 히어로 높이를 만든다(악기 패널 높이 추종).
   margin-left 는 1920 미만에서 음수가 되어 좌우 배경을 대칭으로 잘라낸다
   (기존 `left: 50%; translateX(-50%)` 과 동일한 위치).
   display: flow-root 는 패널의 상하 margin 이 밖으로 새는 것(마진 상쇄)을 막는다. */
.hero-inner {
  position: relative;
  width: var(--page-width);
  margin-left: calc((100% - var(--page-width)) / 2);
  display: flow-root;
}

/* ========================================
   히어로 배경 장식 (Group 550)
   1920 밖까지 채워야 하므로 hero-inner가 아니라 hero 전체 폭을 기준으로 배치한다.
   구름(bg-blob)의 left 값은 `가운데 1920 박스의 좌측 + Figma x` 로 계산.
   ======================================== */
.hero-bg {
  position: absolute;
  inset: 0;
}

.hero-bg .bg-blob,
.hero-bg .bg-panel,
.hero-bg .bg-panel-solid {
  position: absolute;
}

.bg-blob-01 {
  left: calc(50% - var(--page-width) / 2 - 23.44px);
  top: 267.02px;
  width: 401px;
  height: 292px;
}

.bg-blob-02 {
  left: calc(50% - var(--page-width) / 2 + 1503.67px);
  top: 267.02px;
  width: 435px;
  height: 292px;
}

/* 좌우로 화면 끝까지 늘린다 (Figma 원본은 1990.04 폭) */
.bg-panel {
  left: 0;
  right: 0;
  top: var(--panel-top);
  height: var(--panel-height);
  background-image: linear-gradient(
    177.4deg,
    var(--color-panel-from) 0%,
    var(--color-panel-to) 100%
  );
}

/* 그라데이션 패널 아래를 히어로 끝(2038)까지 채우는 단색 블록 (Figma Rectangle 635) */
.bg-panel-solid {
  left: 0;
  right: 0;
  top: calc(var(--panel-top) + var(--panel-height));
  bottom: 0;
  background-color: var(--color-panel-solid);
}

.bg-blob-03 {
  left: calc(50% - var(--page-width) / 2 - 91.41px);
  top: 671.69px;
  width: 401px;
  height: 292px;
}

.bg-blob-04 {
  left: calc(50% - var(--page-width) / 2 + 1611.51px);
  top: 667.66px;
  width: 401px;
  height: 401px;
}

/* ========================================
   히어로 타이틀
   ======================================== */
.hero-title-sub {
  position: absolute;
  left: 673.5px;
  top: 129.17px;
  width: 573px;
  height: 41px;
  font-family: "NanumSquareRound", sans-serif;
  font-weight: var(--fw-extrabold);
  font-size: 34px;
  line-height: 40.8px;
  text-align: center;
  color: var(--color-sub-title);
}

/* Ria Sans + 외곽선 조합이라 Figma 벡터 그대로 사용 */
.hero-title-main {
  position: absolute;
  left: 672.23px;
  top: 188.85px;
  width: 580px;
  height: 81px;
}

.hero-title-main img {
  width: 100%;
  height: 100%;
}

/* ========================================
   히어로 일러스트 · 음표 장식
   ======================================== */
.hero-deco img {
  position: absolute;
}

.deco-note-01 {
  left: 1596.5px;
  top: 171.17px;
  width: 66px;
  height: 104px;
}

.deco-note-02 {
  left: 1682.22px;
  top: 133.07px;
  width: 67px;
  height: 60px;
}

.deco-note-03 {
  left: 224.43px;
  top: 179.13px;
  width: 75px;
  height: 80px;
}

.deco-keyboard {
  left: 271.91px;
  top: 311.48px;
  width: 1376px;
  height: 169px;
}

.deco-snare-drum {
  left: 522.9px;
  top: 254.21px;
  width: 150.25px;
  height: 187.74px;
}

.deco-recorder {
  left: 1275.9px;
  top: 168.95px;
  width: 199.38px;
  height: 272.84px;
}

/* ========================================
   악기 목록 패널
   ======================================== */
/* 히어로에서 유일하게 흐름에 참여하는 요소 — 패널 높이가 곧 히어로 높이를
   만든다. 높이는 콘텐츠를 따라간다:
   전체 탭(4행)일 때 40 + 탭 67 + gap 24 + 그리드 1196 + 58 = 1385 로
   시안 값과 일치하고, 탭 필터로 행이 줄면 그만큼 짧아진다.
   margin 은 시안의 패널 위치(x 105.87, y 523.7)와 아래 여백(129.3)이다. */
.instrument-panel {
  margin: 523.7px 0 129.3px 105.87px;
  width: 1708px;
  padding: 40px 40px 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  background-color: var(--color-card-panel);
  border-radius: 40px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

/* ========================================
   카테고리 탭
   ======================================== */
.tab-list {
  display: flex;
  gap: 16px;
}

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 67px;
  border-radius: 100px;
  font-family: "NanumSquareNeo", sans-serif;
  font-weight: var(--fw-extrabold);
  font-size: 28px;
  line-height: 30.94px;
  background-color: var(--color-tab-off);
  color: var(--color-tab-off-text);
  transition:
    background-color 0.2s,
    color 0.2s;
}

/* Figma 기준 탭별 고정 너비 */
.tab[data-category="all"] {
  width: 196px;
}

.tab[data-category="korean"] {
  width: 198px;
}

.tab[data-category="western"] {
  width: 188px;
}

.tab.is-active {
  background-color: var(--color-tab-on);
  color: var(--color-tab-on-text);
}

/* ========================================
   악기 그리드
   16종 4행이 스크롤 없이 전부 노출된다 (그리드 1628 × 1196)
   ======================================== */
.instrument-grid {
  display: grid;
  /* Figma 그리드 실측값 (406+16+406+16+384+16+384 = 1628)
     열 너비가 균등하지 않은 것은 Figma 반올림 값 그대로다. 1fr 로 바꾸면
     카드 x좌표가 어긋난다. */
  grid-template-columns: 406px 406px 384px 384px;
  grid-auto-rows: 287px;
  gap: 16px;
  list-style: none;
}

/* ========================================
   악기 카드
   ======================================== */
/* 시안의 3~4행 카드(사물·소금·가야금·카혼·오카리나·드럼)는 285 높이 ·
   악기명 #33060b 로 그려져 있으나, 1~2행과 같은 카드이므로 287 · #171719 로
   통일한다 (README '알려진 디자인 이슈' 참고) */
.instrument-card {
  height: 287px;
  background-color: var(--color-card-bg);
  border-radius: 11px;
  overflow: hidden;
}

.instrument-card > a {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 3px;
}

.instrument-thumb {
  display: block;
  flex: 0 0 auto;
  height: 218px;
  background-color: var(--color-card-thumb);
  border-radius: 9px 9px 0 0;
  overflow: hidden;
}

.instrument-thumb img {
  width: 100%;
  height: 100%;
}

.instrument-name {
  display: block;
  height: 33px;
  font-family: "NanumSquareNeo", sans-serif;
  font-weight: var(--fw-extrabold);
  font-size: 30px;
  line-height: 33.15px;
  letter-spacing: -0.9px;
  text-align: center;
  color: var(--color-card-label);
}

/* ========================================
   푸터
   ======================================== */
#footer {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: var(--page-min-width);
  height: var(--footer-height);
  background-color: var(--color-footer-bg);
}

.footer-container {
  position: relative;
  width: 1163.19px;
  height: 87.24px;
}

.footer-logo {
  position: absolute;
  left: 0;
  top: 16.96px;
  width: 153.15px;
  height: 50.4px;
}

.footer-service {
  position: absolute;
  left: 177.38px;
  top: 14.22px;
  display: flex;
  align-items: center;
  height: 18px;
  font-family: "Pretendard Variable", sans-serif;
  font-weight: var(--fw-regular);
  font-size: 14.5399px;
  line-height: 17.45px;
  color: var(--color-footer-text);
}

.footer-copyright {
  position: absolute;
  left: 177.38px;
  top: 39.06px;
  height: 32.57px;
  font-family: "Pretendard Variable", sans-serif;
  font-weight: var(--fw-light);
  font-size: 13.5705px;
  line-height: 16.28px;
  color: var(--color-footer-text);
}