@import url('../fonts/fonts.css');

/* ========================================
   Design Tokens
   Base: 1rem = 16px
   ======================================== */

:root {
  /* Fonts (Paperlogy → font-family: Paperozi) */
  --font-suit: 'Suit', sans-serif;
  --font-paperlogy: 'Paperozi', sans-serif;

  /* Suit weights — Bold 스펙은 font-weight 600 (Semibold) */
  --fw-suit-bold: 600;

  /* Base Color */
  --color-text-dark: #333333;
  --color-grey-600: #747883;
  --color-grey-500: #9da1ac;
  --color-grey-400: #b8bcc4;
  --color-grey-300: #d2d5da;
  --color-grey-200: #e6e7eb;
  --color-grey-100: #f3f4f6;
  --color-grey-50: #fbfcfe;
  --color-white: #ffffff;

  /* Primary / Brand */
  --color-brand-dark: #322a23;
  --color-brand-point: #a68e72;
  --color-brand-light-1: #f0ede4;
  --color-brand-light-2: #f9f7f3;
  --color-brand-light-3: #f6f3f2;

  /* Error */
  --color-error-300: #dc2626;
  --color-error-400: #991b1b;

  /* Breakpoints (reference) */
  --bp-mobile-min: 20rem; /* 320px */ 
  --bp-tablet: 48rem; /* 768px */
  --bp-pc: 64rem; /* 1024px */
  --layout-max: 120rem; /* 1920px */

  /* Grid — mobile default (320–767) */
  --grid-columns: 4;
  --grid-gutter: 1.25rem; /* 20px */
  --grid-margin: 1.25rem; /* 20px */

  /* Typography — Mobile (320–767) */
  --fs-extra-large: 2rem; /* 32px */
  --fs-hero-title: 1.875rem; /* 30px */
  --fs-title: 1.75rem; /* 28px */
  --fs-subtitle-lg: 1.5rem; /* 24px */
  --fs-subtitle-md: 1.25rem; /* 20px */
  --fs-body-01: 1.25rem; /* 20px */
  --fs-body-02: 1.125rem; /* 18px */
  --fs-body-03: 1rem; /* 16px */
  --fs-body-04: 0.875rem; /* 14px */
  --fs-body-05: 0.875rem; /* 14px */
  --fs-footer: 0.875rem; /* 14px */
}

/* Tablet: 768–1023px */
@media (min-width: 48rem) {
  :root {
    --grid-columns: 6;
    --grid-gutter: 1.25rem;
    --grid-margin: 1.25rem;

    /* Typography — Tablet (768–1023) */
    --fs-extra-large: 3.625rem; /* 58px */
    --fs-hero-title: 3rem; /* 48px */
    --fs-title: 2rem; /* 32px */
    --fs-subtitle-lg: 1.75rem; /* 28px */
    --fs-subtitle-md: 1.625rem; /* 26px */
    --fs-body-01: 1.375rem; /* 22px */
    --fs-body-02: 1.25rem; /* 20px */
    --fs-body-03: 1.125rem; /* 18px */
    --fs-body-04: 1rem; /* 16px */
    --fs-body-05: 0.875rem; /* 14px */
    --fs-footer: 0.875rem; /* 14px */
  }
}

/* PC: 1024px+ */
@media (min-width: 64rem) {
  :root {
    --grid-columns: 12;
    --grid-gutter: 1.25rem;
    --grid-margin: clamp(
      3.75rem,
      calc(3.75rem + (100vw - 64.0625rem) * 3.75 / 55.9375),
      7.5rem
    ); /* 60px @1025, 120px @1920 */

    /* Typography — PC (1024+) */
    --fs-extra-large: 4rem; /* 64px */
    --fs-hero-title: 3.125rem; /* 50px */
    --fs-title: 2.5rem; /* 40px */
    --fs-subtitle-lg: 2.25rem; /* 36px */
    --fs-subtitle-md: 1.75rem; /* 28px */
    --fs-body-01: 1.5rem; /* 24px */
    --fs-body-02: 1.375rem; /* 22px */
    --fs-body-03: 1.25rem; /* 20px */
    --fs-body-04: 1.125rem; /* 18px */
    --fs-body-05: 1rem; /* 16px */
    --fs-footer: 1rem; /* 16px */
  }
}

/* ========================================
   Base
   ======================================== */

html {
  font-size: 100%; /* 1rem = 16px */
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  min-width: var(--bp-mobile-min);
  padding-top: 5rem; /* fixed header bar 80px */
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: var(--fs-body-05);
  color: var(--color-text-dark);
  background-color: var(--color-white);
  /* %는 계산된 px로 상속되어 큰 글자가 겹침 → 단위 없는 배수 사용 */
  line-height: 1.3;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

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

/* ========================================
   Layout
   ======================================== */

.container {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
}

/* ========================================
   Typography — PC
   ======================================== */

/* Extra Large — Paperlogy ExtraBold 64 */
.text-extra-large {
  font-family: var(--font-paperlogy);
  font-weight: 800;
  font-size: var(--fs-extra-large);
}

/* Extra Large — Suit ExtraBold 64 */
.text-extra-large-suit {
  font-family: var(--font-suit);
  font-weight: 800;
  font-size: var(--fs-extra-large);
}

/* Hero-title — Paperlogy Bold 50 */
.text-hero-title {
  font-family: var(--font-paperlogy);
  font-weight: 700;
  font-size: var(--fs-hero-title);
}

/* Title01 — Paperlogy Semibold 40 */
.text-title-01 {
  font-family: var(--font-paperlogy);
  font-weight: 600;
  font-size: var(--fs-title);
  letter-spacing: 0.1em; /* 10% */
}

/* Title02 — Suit Medium 40 */
.text-title-02 {
  font-family: var(--font-suit);
  font-weight: 500;
  font-size: var(--fs-title);
  letter-spacing: 0.1em; /* 10% */
}

/* Title03 — Suit Semibold 40 */
.text-title-03 {
  font-family: var(--font-suit);
  font-weight: 600;
  font-size: var(--fs-title);
  letter-spacing: 0.1em; /* 10% */
}

/* Subtitle01 — Paperlogy Bold 36 */
.text-subtitle-01 {
  font-family: var(--font-paperlogy);
  font-weight: 700;
  font-size: var(--fs-subtitle-lg);
}

/* Subtitle02 — Suit Bold 36 */
.text-subtitle-02 {
  font-family: var(--font-suit);
  font-weight: var(--fw-suit-bold);
  font-size: var(--fs-subtitle-lg);
}

/* Subtitle03 — Suit Bold 28 */
.text-subtitle-03 {
  font-family: var(--font-suit);
  font-weight: var(--fw-suit-bold);
  font-size: var(--fs-subtitle-md);
}

/* Body01 — Suit Regular 24 */
.text-body-01 {
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: var(--fs-body-01);
}

/* Body02 — Suit Regular 22 */
.text-body-02 {
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: var(--fs-body-02);
}

/* P-Body02 — Paperlogy Regular 22 */
.text-p-body-02 {
  font-family: var(--font-paperlogy);
  font-weight: 400;
  font-size: var(--fs-body-02);
}

/* Body03 — Suit Regular 20 */
.text-body-03 {
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: var(--fs-body-03);
}

/* P-Body03 — Paperlogy Regular 20 */
.text-p-body-03 {
  font-family: var(--font-paperlogy);
  font-weight: 400;
  font-size: var(--fs-body-03);
}

/* Body04 — Suit Regular 18 */
.text-body-04 {
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: var(--fs-body-04);
}

/* Body05 — Suit Regular 16 */
.text-body-05 {
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: var(--fs-body-05);
}

/* Footer — Suit Regular 16 */
.text-footer {
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: var(--fs-footer);
}

/* Title01 — Tab/Mo: Paperlogy Bold (PC는 Semibold 600) */
@media (max-width: 63.9375rem) {
  .text-title-01 {
    font-weight: 700;
  }
}

/* ========================================
   3단 타이틀
   ======================================== */

.heading-3tier {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  line-height: 130%;
}

.heading-3tier__sub-title {
  margin: 0;
  font-family: var(--font-paperlogy);
  font-weight: 400;
  font-size: 1rem; /* 16px — mobile */
  line-height: 130%;
  color: var(--color-brand-point);
}

.heading-3tier__title {
  margin: 0.5rem 0 0; /* 8px — mobile */
  font-family: var(--font-suit);
  font-weight: 600;
  font-size: 1.75rem; /* 28px — mobile */
  line-height: 130%;
  color: var(--color-brand-dark);
}

.heading-3tier__desc {
  margin: 1.25rem 0 0; /* 20px — mobile */
  font-family: var(--font-suit);
  font-weight: 300;
  font-size: 1rem; /* 16px — mobile */
  line-height: 160%;
  color: var(--color-brand-dark);
}

.heading-3tier__char {
  display: inline-block;
  will-change: transform, opacity;
}

.heading-3tier__desc-keep {
  white-space: nowrap;
}

@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .heading-3tier__sub-title {
    font-size: 1.125rem; /* 18px */
  }

  .heading-3tier__title {
    margin-top: 0.875rem; /* 14px */
    font-size: 2rem; /* 32px */
  }

  .heading-3tier__desc {
    font-size: 1.25rem; /* 20px */
    line-height: 130%;
    margin-top: 0.75rem; /* 12px */
  }
}

@media (min-width: 64rem) {
  .heading-3tier__sub-title {
    font-size: 1.375rem; /* 22px */
  }

  .heading-3tier__title {
    margin-top: 0.875rem; /* 14px */
    font-size: 2.5rem; /* 40px */
  }

  .heading-3tier__desc {
    font-size: 1.375rem; /* 22px */
    line-height: 130%;
    margin-top: 0.75rem; /* 12px */
  }
}

@media (max-width: 47.9375rem) {
  .heading-3tier__desc {
    max-width: 21.25rem; /* 340px */
    word-break: keep-all;
    text-wrap: pretty;
  }
}

/* ========================================
   포트폴리오 안내 (세션 최초 1회, 자동 닫힘)
   ======================================== */

.portfolio-notice {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  box-sizing: border-box;
  background-color: rgba(50, 42, 35, 0.45);
  pointer-events: none;
  opacity: 0;
  animation: portfolio-notice-cycle 4.8s ease forwards;
}

.portfolio-notice.is-leaving {
  animation: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.portfolio-notice__panel {
  position: relative;
  max-width: 34rem;
  margin: 0;
  padding: 2.25rem 2.75rem 2rem;
  border-radius: 1.25rem;
  background-color: var(--color-white);
  box-shadow: 0 1rem 2.5rem rgba(50, 42, 35, 0.18);
  text-align: center;
}

.portfolio-notice__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-dark);
  cursor: pointer;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
}

.portfolio-notice__text {
  margin: 0;
  font-family: var(--font-suit);
  font-weight: 400;
  font-size: clamp(0.75rem, 3.636vw, 1rem); /* 16px */
  line-height: 160%;
  color: var(--color-brand-dark);
  word-break: keep-all;
}

@keyframes portfolio-notice-cycle {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  78% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@media (min-width: 48rem) and (max-width: 63.9375rem) {
  .portfolio-notice__text {
    font-size: clamp(0.844rem, 1.76vw, 1.125rem); /* 18px */
  }
}

@media (min-width: 64rem) {
  .portfolio-notice__text {
    font-size: 1.125rem; /* 18px */
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-notice {
    animation: none;
    opacity: 1;
  }

  .portfolio-notice.is-leaving {
    transition: none;
  }
}

/* ========================================
   Mobile — 한글 줄바꿈 (띄어쓰기 단위)
   ======================================== */

@media (max-width: 47.9375rem) {
  body {
    padding-top: 3.75rem; /* fixed header bar 60px */
    word-break: keep-all;
  }

  /* 긴 URL·연속 영문 등 overflow 방지 */
  .site-footer__meta,
  .site-footer__link {
    overflow-wrap: anywhere;
  }
}