@charset "UTF-8";

/* ==========================================================================
   파메스테틱 소개페이지 (브랜드 스토리)
   - PC 디자인 1920 기준 / 콘텐츠 폭 1280 중앙
   - 반응형: 768px 이하 모바일 (360 디자인 기준, width:100%)
   ========================================================================== */

/* 폰트 스택
   --font-serif-en : 영문 세리프 헤드라인 (Minion Variable Concept, Adobe Fonts 미연동 시 KoPub 바탕으로 폴백)
   --font-serif-ko : 국문 명조 제목 (KoPubWorld 바탕)
   --font-sans     : 본문 고딕 (Pretendard) */
:root {
  --font-serif-en: 'Minion Variable Concept', 'minion-pro', 'KoPubWorld Batang', serif;
  --font-serif-ko: 'KoPubWorld Batang', serif;
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;

  /* 컬러 (Figma 추출값) */
  --color-headline: #1f1f1f;   /* 영문 헤드라인 */
  --color-heading: #353535;    /* 국문 소제목 / 리드 */
  --color-body: #797979;       /* 본문 */
  --color-label: #9c8364;      /* 섹션 라벨 / 캡션 (브론즈) */
  --color-white: #fff;

  /* 배경 */
  --color-band-gray: #f9f9f9;  /* 근원적 큐레이션 / 사회공헌 밴드 */
  --color-band-navy: #242d41;  /* 아티미엄 프로젝트 밴드 */
  --color-band-dark: #212121;  /* 파메서울 밴드 */
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

.brand-story {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-body);
  background: #fff;
  overflow-x: hidden;
}

body * {
    line-height: unset;
}

img {
  display: block;
  max-width: 100%;
}

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

ul, ol {
  list-style: none;
}

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

/* 공통 레이아웃 -------------------------------------------------------- */
.brand-story {
  width: 100%;
}

/* PC 콘텐츠 폭 1280 중앙 (1920 디자인의 320~1600 영역)
   좌우 20px 여백을 포함하므로 max-width 는 1280 + 40 */
.inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (max-width: 768px) {
  .inner {
    max-width: none;
    padding: 0 25px; /* MO 360 디자인의 좌우 여백 */
  }
}

/* 공통 타이포 --------------------------------------------------------- */

/* 섹션 상단 라벨 / 이미지 하단 캡션 (브론즈) */
.sec-label,
.sec-caption {
  font-size: 16px;
  line-height: 19px;
  color: var(--color-label);
  text-align: center;
}

/* 영문 세리프 헤드라인 */
.sec-headline {
  font-family: var(--font-serif-en);
  font-weight: 500;
  font-size: 36px;
  line-height: 52px;
  color: var(--color-headline);
  text-align: center;
}

/* 헤드라인 하단 국문 리드 */
.sec-lead {
  font-size: 20px;
  line-height: 24px;
  color: var(--color-heading);
  text-align: center;
}

/* 국문 명조 소제목 */
.sec-title {
  font-family: var(--font-serif-ko);
  font-weight: 400; /* KoPub Medium */
  font-size: 24px;
  line-height: 37px;
  color: var(--color-heading);
}

/* 국문 명조 소제목 (소제목보다 한 단계 작음) */
.sec-subtitle {
  font-family: var(--font-serif-ko);
  font-weight: 400;
  font-size: 20px;
  line-height: 31px;
  color: var(--color-heading);
}

/* 본문 */
.sec-body {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.32px;
  color: var(--color-body);
  text-align: left;
}

.sec-body p + p {
  margin-top: 24px;
}

.br-mo {
  display: none; /* 모바일 전용 줄바꿈 */
}

.br-pc {
  display: inline; /* PC 전용 줄바꿈 (모바일에서는 자연 줄바꿈) */
}

/* 이미지 + 텍스트 2단 공용 레이아웃
   컬럼 폭은 섹션별로 지정 (시안이 660/590/564/544 등으로 다름) */
.split {
  display: flex;
  justify-content: space-between;
}

.split__desc {
  padding-top: 127px; /* 이미지 상단 기준 텍스트 시작 위치 */
}

.split__desc .sec-body {
  margin-top: 10px;
}

.split__figure {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

@media (max-width: 768px) {
  .sec-label,
  .sec-caption {
    font-size: 12px;
    line-height: 14px;
  }

  .sec-headline {
    font-size: 20px;
    line-height: 28px;
  }

  .sec-lead {
    font-size: 14px;
    line-height: 17px;
  }

  .sec-title {
    font-size: 16px;
    line-height: 25px;
  }

  .sec-subtitle {
    font-size: 14px;
    line-height: 22px;
  }

  .sec-body {
    font-size: 13px;
    /* 행간은 PC와 동일한 24px (시안 모바일 텍스트 박스 높이가 모두 24의 배수) */
  }

  .sec-body p + p {
    margin-top: 24px;
  }

  .br-mo {
    display: inline;
  }

  .br-pc {
    display: none;
  }

  .split {
    display: block;
  }

  /* 세로 배치에서는 컬럼 폭 지정(flex-basis)이 높이로 해석되므로 해제 */
  .split__figure,
  .split__desc {
    flex: 0 0 auto;
    width: 100%;
  }

  .split__desc {
    padding-top: 26px;
  }

  .split__desc .sec-body {
    margin-top: 6px;
  }
}

/* [2] 히어로 ------------------------------------------------------------ */
.hero {
  position: relative;
  width: 100%;
  height: 620px;
  overflow: hidden;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 100%; /* PC: 원본 하단부 크롭 */
}

.hero__text-wrap {
  position: absolute;
  top: 256px;
  left: 0;
  right: 0;
}

.hero__title {
  font-family: var(--font-serif-ko);
  font-weight: 400; /* KoPub Medium */
  font-size: 32px;
  line-height: 49px;
  letter-spacing: 0.64px;
  color: var(--color-white);
}

.hero__sub {
  margin-top: 12px;
  font-size: 18px;
  line-height: 26px;
  color: var(--color-white);
}

@media (max-width: 768px) {
  .hero {
    height: 390px;
  }

  .hero__img {
    object-position: 66% 50%; /* MO: 인물 중심 크롭 */
  }

  .hero__text-wrap {
    top: 68px;
  }

  .hero__title {
    font-size: 22px;
    line-height: 34px;
    letter-spacing: 0.44px;
  }

  .hero__sub {
    margin-top: 4px;
    font-size: 14px;
    line-height: 18px;
    color: #f0f0f1;
  }
}

/* [3] 브랜드 철학 -------------------------------------------------------- */
.philosophy {
  padding: 130px 0 147px;
}

.philosophy .sec-headline {
  margin-top: 3px;
}

/* 대형 비주얼 (연출2-2) 1280x898 */
.philosophy__visual {
  margin-top: 52px;
  aspect-ratio: 1280 / 898;
  background: url("../img/images/philosophy-main.png") no-repeat 50% 52% / cover;
}

.philosophy .sec-caption {
  margin-top: 52px;
}

/* 이미지 + 텍스트 2단 */
.philosophy__cols {
  margin-top: 144px;
}

/* 좌측 이미지 (0916(1) 복사2) 664x518 — 원본을 확대 크롭한 배치 */
.philosophy__figure {
  flex: 0 0 51.5625%; /* 660 / 1280 */
  aspect-ratio: 664 / 518;
  background-image: url("../img/images/philosophy-sub.png");
}

.philosophy__cols .split__desc {
  flex: 0 0 42.5%; /* 544 / 1280 */
}

@media (max-width: 768px) {
  .philosophy {
    padding: 46px 0;
  }

  .philosophy .sec-headline {
    margin-top: 2px;
  }

  .philosophy .sec-lead {
    margin-top: 8px;
  }

  .philosophy__visual {
    margin-top: 26px;
    aspect-ratio: 310 / 256;
    background-position: 50% 50%;
  }

  .philosophy .sec-caption {
    margin-top: 16px;
  }

  .philosophy__cols {
    margin-top: 62px;
  }

  .philosophy__figure {
    aspect-ratio: 310 / 256;
    background-position: 50% 50%;
    background-size: cover;
  }
}

/* [4] 근원적 큐레이션 (그레이 밴드) ------------------------------------- */
.curation {
  padding: 112px 0 111px;
  background: var(--color-band-gray);
}

.curation .sec-body {
  margin-top: 10px;
}

/* [4] 일상이 되는 변화 --------------------------------------------------- */
.change {
  padding-top: 144px;
  padding-bottom: 130px;
}

.change__desc {
  flex: 0 0 44.0625%; /* 564 / 1280 */
  padding-top: 334px; /* 세로 이미지 기준 텍스트 시작 위치 */
}

/* 우측 이미지 (연출11) 590x860 */
.change__figure {
  flex: 0 0 46.09375%; /* 590 / 1280 */
  aspect-ratio: 590 / 860;
  background-image: url("../img/images/change.png");
}

@media (max-width: 768px) {
  .curation {
    padding: 46px 0;
  }

  .curation .sec-body {
    margin-top: 6px;
  }

  .change {
    padding-top: 46px;
    padding-bottom: 40px;
  }

  /* 모바일은 이미지가 위, 텍스트가 아래 */
  .change__cols {
    display: flex;
    flex-direction: column;
  }

  .change__figure {
    order: -1;
    aspect-ratio: 310 / 356;
  }

  .change__desc {
    padding-top: 26px;
  }
}

/* [5] 사회공헌 ------------------------------------------------------------ */
/* 사회공헌 ~ 우물 프로젝트가 하나의 그레이 밴드로 이어짐 */
.band-gray {
  background: var(--color-band-gray);
}

.social {
  padding-top: 130px;
}

.social .sec-headline {
  margin-top: 3px;
}

/* 사회기여 이미지 3장 (PC: 가로 3분할 410x412 / MO: 모자이크) */
.social__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 52px;
}

.social__cell {
  aspect-ratio: 410 / 412;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.social__cell:nth-child(1) { background-image: url("../img/images/social-1.png"); }
.social__cell:nth-child(2) { background-image: url("../img/images/social-2.png"); }
.social__cell:nth-child(3) { background-image: url("../img/images/social-3.png"); }

.social .sec-caption {
  margin-top: 52px;
}

.social__cols {
  margin-top: 144px;
}

/* 좌측 이미지 (연출4) 660x518 */
.social__figure {
  flex: 0 0 51.5625%; /* 660 / 1280 */
  aspect-ratio: 660 / 518;
  background-image: url("../img/images/platform.png");
}

.social__cols .split__desc {
  flex: 0 0 42.5%; /* 544 / 1280 */
}

@media (max-width: 768px) {
  .social {
    padding-top: 46px;
  }

  .social .sec-headline {
    margin-top: 2px;
  }

  .social .sec-lead {
    margin-top: 8px;
  }

  /* MO: 좌측 작은 이미지 2장 세로 + 우측 큰 이미지 1장 */
  .social__grid {
    grid-template-columns: 100fr 200fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    aspect-ratio: 310 / 210;
    margin-top: 26px;
  }

  .social__cell {
    aspect-ratio: auto;
  }

  .social__cell:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .social .sec-caption {
    margin-top: 16px;
  }

  .social__cols {
    margin-top: 62px;
  }

  .social__figure {
    aspect-ratio: 310 / 256;
  }
}

/* [6] 우물 프로젝트 ------------------------------------------------------- */
.wells {
  padding-bottom: 130px;
}

/* 유튜브 영상 — 폭에 맞춰 16:9 비율 유지 (영상 원본 비율이므로 여백이 생기지 않음) */
.wells__video {
  position: relative;
  margin-top: 144px;
  aspect-ratio: 16 / 9;
  background: #000;
}

.wells__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 영상 하단 전체 폭 텍스트 (2단 영역은 제외) */
.wells__video + .sec-title {
  margin-top: 80px;
}

.wells > .inner > .sec-body {
  margin-top: 10px;
}

.wells .sec-subtitle {
  margin-top: 52px;
}

/* 일상이 되는 나눔 — 텍스트 좌측 / 이미지 우측 */
.sharing__cols {
  margin-top: 144px;
}

.sharing__desc {
  flex: 0 0 42.5%;  /* 544 / 1280 */
  padding-top: 163px;
}

.sharing__figure {
  flex: 0 0 51.5625%; /* 660 / 1280 */
  aspect-ratio: 660 / 518;
  background-image: url("../img/images/sharing.png");
}

.sharing__contact {
  margin-top: 64px;
  font-size: 16px;
  line-height: 24px;
}

.sharing__contact a {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .wells {
    padding-bottom: 56px;
  }

  .wells__video {
    margin-top: 62px;
  }

  .wells__video + .sec-title {
    margin-top: 26px;
  }

  .wells > .inner > .sec-body {
    margin-top: 6px;
  }

  .wells .sec-subtitle {
    margin-top: 26px;
  }

  /* 모바일은 이미지가 위, 텍스트가 아래 */
  .sharing__cols {
    display: flex;
    flex-direction: column;
    margin-top: 62px;
  }

  .sharing__figure {
    order: -1;
    aspect-ratio: 310 / 256;
  }

  .sharing__desc {
    padding-top: 26px;
  }
}
@media (max-width: 768px) {
  .sharing__contact a {
    margin-top: 51px;
    font-size: 13px;
  }}


/* [7] 예술 프로젝트 ------------------------------------------------------- */
.art {
  padding: 130px 0;
}

.art .sec-headline {
  margin-top: 3px;
}

.art__cols {
  margin-top: 144px;
}

/* 좌측 이미지 (연출6) 590x860 */
.art__figure {
  flex: 0 0 46.09375%; /* 590 / 1280 */
  aspect-ratio: 590 / 860;
  background-image: url("../img/images/art.png");
}

.art__desc {
  flex: 0 0 44.0625%; /* 564 / 1280 */
  padding-top: 334px; /* 세로 이미지 기준 텍스트 시작 위치 */
}

@media (max-width: 768px) {
  .art {
    padding: 36px 0 46px;
  }

  .art .sec-headline {
    margin-top: 2px;
  }

  .art .sec-lead {
    margin-top: 8px;
  }

  .art__cols {
    margin-top: 46px;
  }

  .art__figure {
    aspect-ratio: 310 / 356;
  }

  .art__desc {
    padding-top: 26px;
  }
}

/* [8] 아티미엄 프로젝트 --------------------------------------------------- */
.artium {
  padding: 130px 0 122px;
  background: var(--color-band-navy);
}

.artium__title {
  font-family: var(--font-serif-ko);
  font-weight: 400;
  font-size: 24px;
  line-height: 37px;
  color: var(--color-label);
  text-align: center;
}

/* 네이비 배경 위 본문은 흰색 */
.artium .sec-body {
  margin-top: 10px;
  color: var(--color-white);
}

.artium__intro {
  text-align: center;
}

.artium__caption {
  margin-top: 52px;
  font-family: var(--font-serif-ko);
  font-weight: 400;
  font-size: 24px;
  line-height: 37px;
  color: var(--color-label);
}

/* 캐러셀 --------------------------------------------------------------- */
.carousel {
  position: relative;
  margin-top: 52px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y; /* 세로 스크롤은 브라우저에 양보 */
  -webkit-user-select: none;
  user-select: none;
}

.carousel.is-dragging {
  cursor: grabbing;
}

/* 본문 다음에 오는 캐러셀(프로젝트 2)은 간격이 더 넓음 */
.sec-body + .carousel {
  margin-top: 144px;
}

.artium__intro + .carousel {
  margin-top: 52px;
}

.carousel__track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel__slide {
  flex: 0 0 100%;
}

.carousel__slide img {
  width: 100%;
  aspect-ratio: 1280 / 728;
  object-fit: cover;
  pointer-events: none; /* 드래그 중 이미지가 끌리지 않도록 */
}

.carousel__dots {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.carousel__dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid var(--color-white);
  border-radius: 50%;
  background: transparent;
}

.carousel__dot.is-active {
  background: var(--color-white);
}

@media (max-width: 768px) {
  .artium {
    padding: 46px 0;
  }

  .artium__title {
    font-size: 16px;
    line-height: 25px;
  }

  .artium .sec-body {
    margin-top: 6px;
  }

  .artium__caption {
    margin-top: 26px;
    font-size: 16px;
    line-height: 25px;
  }

  .carousel {
    margin-top: 26px;
  }

  .sec-body + .carousel {
    margin-top: 46px;
  }

  .artium__intro + .carousel {
    margin-top: 26px;
  }

  .carousel__slide img {
    aspect-ratio: 310 / 256;
  }

  .carousel__dots {
    bottom: 22px;
    gap: 8px;
  }

  .carousel__dot {
    width: 8px;
    height: 8px;
  }
}

/* [9] 전시 프로젝트 ------------------------------------------------------- */
.exhibition {
  padding: 130px 0;
}

.exhibition__desc {
  flex: 0 0 44.0625%; /* 564 / 1280 */
  padding-top: 338px; /* 세로 이미지 기준 텍스트 시작 위치 */
}

/* 우측 이미지 (0710) 590x860 */
.exhibition__figure {
  flex: 0 0 46.09375%; /* 590 / 1280 */
  aspect-ratio: 590 / 860;
  background-image: url("../img/images/exhibition.png");
}

@media (max-width: 768px) {
  .exhibition {
    padding: 46px 0;
  }

  /* 모바일은 이미지가 위, 텍스트가 아래 */
  .exhibition__cols {
    display: flex;
    flex-direction: column;
  }

  .exhibition__figure {
    order: -1;
    aspect-ratio: 310 / 356;
  }

  .exhibition__desc {
    padding-top: 26px;
  }
}

/* [10] 파메서울 ----------------------------------------------------------- */
.seoul {
  padding: 130px 0 180px;
  background: var(--color-band-dark);
}

/* 어두운 배경 위에서는 제목·본문을 흰색으로 (라벨/캡션은 브론즈 유지) */
.seoul .sec-headline,
.seoul .sec-lead,
.seoul .sec-title,
.seoul .sec-body {
  color: var(--color-white);
}

.seoul .sec-headline {
  margin-top: 3px;
}

/* 파메서울 이미지 3장 (PC: 가로 3분할 410x412 / MO: 모자이크) */
.seoul__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 52px;
}

.seoul__cell {
  aspect-ratio: 410 / 412;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.seoul__cell:nth-child(1) { background-image: url("../img/images/seoul-1.png"); }
.seoul__cell:nth-child(2) { background-image: url("../img/images/seoul-2.png"); }
.seoul__cell:nth-child(3) { background-image: url("../img/images/seoul-3.png"); }

.seoul .sec-caption {
  margin-top: 52px;
}

/* 검정 밴드 */
.seoul__black {
  margin-top: 144px;
  padding: 136px 0 135px;
  background: #000;
}

.seoul__black .sec-body {
  margin-top: 10px;
}

/* 이미지 + 텍스트 2단 */
.seoul__cols {
  margin-top: 144px;
}

.seoul__figure {
  flex: 0 0 46.09375%; /* 590 / 1280 */
  aspect-ratio: 590 / 860;
  background-image: url("../img/images/seoul-main.png");
}

.seoul__desc {
  flex: 0 0 43.984375%; /* 563 / 1280 */
  padding-top: 302px;
}

.seoul__contact {
  margin-top: 64px;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-white);
}

.seoul__contact a {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .seoul {
    padding: 46px 0 31px;
  }

  .seoul .sec-headline {
    margin-top: 2px;
  }

  .seoul .sec-lead {
    margin-top: 8px;
  }

  /* MO: 좌측 작은 이미지 2장 세로 + 우측 큰 이미지 1장 */
  .seoul__grid {
    grid-template-columns: 100fr 200fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    aspect-ratio: 310 / 210;
    margin-top: 26px;
  }

  .seoul__cell {
    aspect-ratio: auto;
  }

  .seoul__cell:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .seoul .sec-caption {
    margin-top: 16px;
  }

  .seoul__black {
    margin-top: 46px;
    padding: 46px 0;
  }

  .seoul__black .sec-body {
    margin-top: 6px;
  }

  .seoul__cols {
    margin-top: 46px;
  }

  .seoul__figure {
    aspect-ratio: 310 / 356;
  }

  .seoul__desc {
    padding-top: 26px;
  }

  .seoul__contact {
    margin-top: 51px;
    font-size: 13px;
  }
}