/* =====================================================================
   FLC — Four Leaf Clover · 손그림 / 손글씨 · 흑백 랜딩
   순수 CSS. color / gradient / box-shadow 사용 금지.
   ===================================================================== */

/* ---- 손글씨 폰트 (사용자 제공 예정) -----------------------------------
   assets/fonts/ 에 파일을 넣으면 자동 적용됩니다.
   파일이 없으면 아래 fallback 손글씨 글꼴로 대체되어 그대로 보입니다. */
@font-face {
  font-family: "FLCHand";
  src: url("../assets/fonts/flc-hand.woff2") format("woff2"),
       url("../assets/fonts/flc-hand.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- 디자인 토큰 ----------------------------------------------------- */
:root {
  --paper: #ffffff;
  --ink: #1a1a1a;
  --stroke: 2.5px;

  --hand: "FLCHand", "Bradley Hand", "Segoe Print", "Comic Sans MS",
          "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --pad: clamp(1.25rem, 5vw, 3rem);
  --maxw: 34rem;                 /* 데스크톱에서 콘텐츠 폭 상한 */
}

/* ---- 리셋 ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

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

body {
  font-family: var(--hand);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.35;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { margin: 0; }
h1, h2 { margin: 0; font-weight: 400; }

a { color: inherit; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* 포커스 가시성: 잉크색 외곽선 (절대 제거하지 않음) */
:focus-visible {
  outline: var(--stroke) solid var(--ink);
  outline-offset: 4px;
  border-radius: 2px;
}

/* 폰트 로드 전 큰 제목의 글꼴 점프 숨김 (JS 있을 때만) */
.js body:not(.fonts-loaded) .gate { visibility: hidden; }

/* =====================================================================
   세로 스크롤 스냅 — 3개 풀스크린 섹션
   ===================================================================== */
.scroll-root {
  height: 100vh;            /* 폴백 */
  height: 100svh;           /* iOS 주소창 점프 회피 */
  overflow-y: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding:
    calc(env(safe-area-inset-top) + var(--pad))
    var(--pad)
    calc(env(safe-area-inset-bottom) + var(--pad));
}
.section:focus { outline: none; }

.section__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  /* 시안처럼 콘텐츠를 정중앙보다 약간 위로 */
  margin-top: -6svh;
}

/* ---- ① 인트로 ---- */
.headline {
  font-size: min(4.5rem, clamp(2rem, 9vw, 4.5rem));
  line-height: 1.15;
}
.subhead {
  margin-top: clamp(1.5rem, 5vh, 3rem);
  font-size: min(2.5rem, clamp(1.4rem, 6vw, 2.5rem));
}

/* ---- ② 브랜드 ---- */
.brand__logo { line-height: 1; }
/* 손글씨 FLC (얇은 펜 획, 볼드 아님) */
.flc {
  display: block;
  width: min(58vw, 260px);
  height: auto;
  margin: 0 auto;
  color: var(--ink);
}
/* 손그림 © 표시 */
.copyright {
  width: 0.95em; height: 0.95em;
  vertical-align: -0.12em;
  color: var(--ink);
}
.brand__name {
  margin-top: -0.2rem;
  font-size: min(2rem, clamp(1.2rem, 6vw, 2rem));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
}
.brand__year {
  margin-top: 0.3rem;
  font-size: min(1.5rem, clamp(1rem, 4.5vw, 1.5rem));
}
.brand__slogan {
  margin-top: clamp(1.4rem, 4.5vh, 2.4rem);
  font-size: min(1.6rem, clamp(1.05rem, 4.8vw, 1.6rem));
}

.icon--clover {
  width: 1.1em; height: 1.1em;
  color: var(--ink);
  transform: rotate(-6deg);
}

/* ---- 아래 화살표(↓) 스크롤 큐 ---- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + clamp(1.5rem, 6svh, 4rem));
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 56px; height: 56px;          /* ≥44px 터치 타깃 */
  color: var(--ink);
  text-decoration: none;
  animation: bob 1.8s ease-in-out infinite;
}
.scroll-cue .icon--down { width: 30px; height: 40px; }

@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* =====================================================================
   ③ 앱 캐러셀
   ===================================================================== */
.section--apps { padding-inline: 0; }

.carousel {
  position: relative;            /* 화살표(.nav-arrow)의 절대배치 기준 */
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
}

/* 가로 스크롤 뷰포트 — 전체 폭, 네이티브 스와이프/스냅 */
.carousel__viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;       /* 스와이프 시 항상 카드 한 장에 딱 맞춰 넘어감 */
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  touch-action: pan-x;                 /* 가로=캐러셀, 세로=페이지 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;               /* Firefox */
}
.carousel__viewport::-webkit-scrollbar { display: none; }  /* WebKit */
.carousel__viewport:focus { outline: none; }
.carousel__viewport:focus-visible {
  outline: var(--stroke) solid var(--ink);
  outline-offset: -6px;
}

.carousel__track {
  display: flex;
}

.card {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem var(--pad) 2rem;
  gap: 0.5rem;
}

/* ---- 앱 아이콘 = 링크 (클릭 시 스토어/메일 연결) ---- */
.frame-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
  margin-bottom: clamp(1rem, 3vh, 1.6rem);
  border-radius: 44px;
}
.frame-link:focus-visible {
  outline: var(--stroke) solid var(--ink);
  outline-offset: 6px;
}

/* ---- 손그림 둥근 사각형 프레임 ---- */
.frame {
  position: relative;
  width: min(62vw, 300px);
  aspect-ratio: 1.12 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11%;
  border: var(--stroke) solid var(--ink);
  /* 비대칭 모서리 + 미세 회전 = 손그림 느낌 */
  border-radius: 40px 34px 44px 36px;
  transform: rotate(-0.6deg);
  background: var(--paper);
  transition: transform 0.15s ease;
}
/* 좌상단 오버슈트 꼬리 (펜이 살짝 삐져나온 자국) */
.frame::before {
  content: "";
  position: absolute;
  top: -2px; left: 16px;
  width: 26px; height: 0;
  border-top: var(--stroke) solid var(--ink);
  transform: rotate(-5deg);
}
.frame__icon {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: rotate(0.6deg);            /* 프레임 회전 상쇄 */
}

.card__name {
  font-size: min(2rem, clamp(1.3rem, 6vw, 2rem));
  line-height: 1.2;
}
.card__line {
  font-size: min(1.5rem, clamp(1.05rem, 4.6vw, 1.5rem));
}
.card__tag {
  font-size: min(1.5rem, clamp(1.05rem, 4.6vw, 1.5rem));
  margin-top: 0.2rem;
}
.card__contact { margin-top: 0.6rem; }
.contact-link {
  font-size: min(1.4rem, clamp(1rem, 4.4vw, 1.4rem));
  text-decoration-thickness: from-font;
  text-underline-offset: 0.18em;
}

/* ---- 좌우 네비게이션 화살표 (화면 양 끝, 프레임 세로 중앙) ---- */
.nav-arrow {
  position: absolute;
  top: 27%;                       /* 아이콘 프레임의 세로 중앙 근처 */
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  padding: 0;
  background: transparent;   /* 투명 — 카드가 화살표 뒤로 매끄럽게 지나감 */
  border: none;
  color: var(--ink);
  cursor: pointer;
}
.nav-arrow--prev { left: clamp(0px, 1vw, 14px); }
.nav-arrow--next { right: clamp(0px, 1vw, 14px); }
.nav-arrow .icon--arrow { width: 30px; height: 38px; }
.nav-arrow--prev .icon--arrow { transform: scaleX(-1); }

/* =====================================================================
   반응형
   ===================================================================== */
/* 터치 기기: 화살표 탭 영역 확대 */
@media (pointer: coarse) {
  .nav-arrow { width: 64px; height: 64px; }
}

/* 데스크톱 호버가 가능한 기기에서만 호버 효과 */
@media (hover: hover) {
  .nav-arrow:hover .icon--arrow { transform: scale(1.12); }
  .nav-arrow--prev:hover .icon--arrow { transform: scaleX(-1) scale(1.12); }
  .scroll-cue:hover { opacity: 0.7; }
  .frame-link:hover .frame { transform: rotate(-0.6deg) scale(1.03); }
  .contact-link:hover { text-decoration-thickness: 2px; }
}

/* 태블릿+ : 프레임을 조금 키움 */
@media (min-width: 640px) {
  .frame { width: min(42vw, 320px); }
  .nav-arrow { top: 30%; }
}

/* 데스크톱 : 카드 프레임 상한 고정(부풀지 않게), 화살표는 양옆 여백으로 */
@media (min-width: 1024px) {
  .frame { width: 340px; }
  .carousel { max-width: 60rem; }
  .nav-arrow--prev { left: clamp(8px, 4vw, 48px); }
  .nav-arrow--next { right: clamp(8px, 4vw, 48px); }
}

/* =====================================================================
   모션 최소화 선호
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .scroll-root { scroll-behavior: auto; }
  .carousel__viewport { scroll-behavior: auto; }
  .scroll-cue { animation: none; }
  * { transition: none !important; }
}