@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════
   common.css — 범용 유틸 클래스 + 공용 애니메이션(@keyframes)

   로드: theme/design/head.sub.php (<head> 안, reset.css 뒤 / 섹션 CSS 앞)

   style.css · header.css · footer.css 에 흩어져 있던 것을 통합했다.
   - 표시 제어: .pc / .mobile / .tablet / .hide / .show / .flowhid …
   - 배치 유틸: .absol / .rltv / .flexrow / .flexcol / .absol_cover / .back_img …
   - 텍스트 유틸: .noto / .bold / .medium / .thin / .txct / .white / .lh …
   - 마퀴·슬라이드 공용: .image_sd* / .slide_y* / .flow_sd* / .swiper*
   - @keyframes 39종 (ddm·blk·marquee·scaleOpa·shake·line-*·spin 등)

   ★ 섹션 전용 스타일은 여기 넣지 않는다 (css/style.css 등 각 섹션 CSS 로).
   ═══════════════════════════════════════════════════════════════ */

/* ══ 디자인 토큰 (:root) ══
   디자이너 텍스트본(포션의 참고사항 txt 등)에서 추린 폰트·컬러를 여기에 등록한다.
   ★ style.css 가 아니라 이 파일이다 — style.css 는 메인 페이지에서만 로드되므로
     거기 :root 를 두면 서브·게시판 페이지와 header.css/footer.css 에서 토큰이 미정의가 된다.
     common.css 는 head.sub.php 가 전 페이지에 싣는다.
   등록 절차는 portion 스킬 참조. Pretendard 는 광역 카스케이드라 토큰 불필요. */
:root {
  --font-free: "Freesentation", sans-serif;       /* 프리젠테이션 — 참고사항 txt 공통폰트 (PSD 최다) */
  --font-nexon: "NEXON Lv2 Gothic", sans-serif;   /* 넥슨Lv2고딕 — 참고사항 txt 공통폰트 (Medium 웹폰트 없음 → 400) */
  --font-nexon1: "NEXON Lv1 Gothic", sans-serif;  /* 넥슨Lv1고딕 — 브랜드·창업안내 PSD (Lv2 와 글리프 폭 다름 → 대체 금지) */
  --font-poppins: "Poppins", sans-serif;          /* 참고사항 txt 공통폰트 (영문) */
  --font-montserrat: "Montserrat", sans-serif;    /* 창업안내 fcon16 영문 띠 (Bold 700 · 자가호스팅 font/montserrat.css · SIL OFL) */

  --color-point: #4b1910;   /* 브랜드 진갈색 — 헤더 창업안내 버튼 실측 */
  /* ↑ 브랜드 포인트색.
     헤더 메뉴 호버(.header_menu_1:hover) · 퀵바 문의하기 버튼 배경(.quick_submit_div)
     · 퀵바 전화번호(.quick_call) 가 이 토큰을 쓴다.
     ★ 비워두면 조용히 깨진다 — CSS 변수는 미정의 시 선언 자체가 무효가 되어
       background-color 가 초기값 transparent 로 떨어지고, 흰 글자라 버튼이 안 보인다.
       (이미지 미비는 깨진 아이콘으로 보이지만 색 토큰은 아무 표시가 없다) */

  --color-cream: #ede0be;   /* 크림 — acon05 바 텍스트·STORE 타이틀 (acon02_slide_tt 동일색) */
  --color-brown: #31140e;   /* 다크브라운 — 커뮤니티 페이저 활성·바(econ01·econ02), econ02 카드 보더 */
}

.flowhid {
  overflow: hidden;
}

.hide {
  display: none !important;
}

/* 콘텐츠 페이지(bbs/content.php) 본문 래퍼 — 블록으로 만든 서브페이지는 본문(co_content)이 비어 있어서
   하단에 빈 흰 박스(article#ctt: margin·padding)만 남는다 → 본문이 없으면 숨긴다.
   ★ `.container` 전체에 걸지 말 것 — head.php 가 게시판·로그인·회원가입 등 모든 bbs 페이지도 `.container` 로 감싼다.
   본문이 있는 콘텐츠 페이지(약관 등)는 content.skin.php 가 `.ctt_has_body` 를 붙여 그대로 보인다. */
.ctt_container:not(.ctt_has_body) {
  display: none !important;
}

.hideopa {
  opacity: 0 !important;
}

.show {
  opacity: 1 !important;
}

@keyframes ddm3 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: rotate(-8deg);
  }
  65% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes ddm4 {
  0% {
    transform: scale(1);
  }
  25% {
    transform: rotate(-2deg);
  }
  50% {
    transform: scale(1.05);
  }
  75% {
    transform: rotate(2deg);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes blk3 {
  0% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rotate_image {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes scaleOpa {
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}

@keyframes scaleOpa2 {
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes ddm {
  0% {
    transform: scale(1);
  }
  50% {
    transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -30);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes rotate_imageY {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes ddm2 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: translateY(20px);
  }
  75% {
    transform: scale(1.02);
    transform: translateY(10px);
  }
  100% {
    transform: scale(1);
    transform: translateY(0px);
  }
}

@keyframes scaleOpa3 {
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes smoke {
  0% {
    transform: translateY(30%) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(-30%) scale(1.1);
    opacity: 0;
  }
}

.smoke {
  animation: smoke 4s infinite linear;
}

@keyframes light {
  0%, 31%, 34%, 39%, 42%, 47% {
    opacity: 0;
  }
  5%, 30%, 35%, 38%, 43%, 46% {
    opacity: 0.4;
  }
  50%, 55%, 60%, 67%, 51%, 54%, 68%, 100% {
    opacity: 1;
  }
  70% {
    opacity: 0.2;
  }
}

@keyframes marqueeX {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes marqueeX_r {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes marqueeY {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes marqueeY_r {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes opa {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes shakeAndFall {
  0% {
    transform: translate(0, -50%) rotate(0);
    opacity: 0;
  }
}

.shakeTwice {
  animation: shakeTwice 2s ease-in-out infinite;
  transform-origin: center;
}

.shakeTwices {
  animation: shakeTwices 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes shakeTwice {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(5deg);
  }
  20% {
    transform: rotate(-5deg);
  }
  30% {
    transform: rotate(4deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes shakeTwices {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(3deg);
  }
  20% {
    transform: rotate(-3deg);
  }
  30% {
    transform: rotate(2deg);
  }
  40% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

div.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.swiper-wrapper.flow {
  pointer-events: none;
  transition-timing-function: linear;
}

.swiper-button-disabled {
  opacity: 0.3;
}

.noto {
  font-family: "Noto Serif", serif;
}

.notokr {
  font-family: "Noto Serif KR", serif;
}

.exbold {
  font-weight: 800;
}

.bold {
  font-weight: 700;
}

.sebold {
  font-weight: 600;
}

.medium {
  font-weight: 500;
}

.regular {
  font-weight: 400;
}

.flight {
  font-weight: 200;
}

.thin {
  font-weight: 100;
}

.animate-blk {
  animation: blk 1s infinite ease-in-out;
}

.scaleOpa {
  animation: scaleOpa infinite 2s;
}

.scaleOpa2 {
  animation: scaleOpa2 infinite 2s;
}

.light {
  animation: light infinite 5s;
}

.rotate_img {
  animation: rotate_image 10s infinite linear;
}

.white {
  color: white;
}

.txct {
  text-align: center;
}

.lh {
  line-height: 1.5;
}

/* reveal 대신 사용 start */
/* 왼쪽부터 나타나기 */
.clip_off02 {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: all 0.8s;
}

/* 가운데에서 나타나기 */
.clip_off {
  clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
  transition: all 0.8s;
}

/* gsap에서 넣을 class */
.clip_on {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}

/* reveal 대신 사용 end */
.absol_cover {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.max_width {
  width: unset !important;
  max-width: 101%;
}

.back_img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

/* image_sd */
.image_sd_wrap {
  overflow: hidden;
}

.image_sd {
  animation: marqueeX 20s infinite linear;
}

.image_sd .absol {
  left: 100%;
}

.image_sd_r {
  animation: marqueeX_r 20s infinite linear;
}

.image_sd_r .absol {
  right: 100%;
}

/* image_sd end */
/* y_slide start */
.slide_y_wrap {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0%;
  overflow: hidden;
}

.slide_y {
  animation: marqueeY 20s infinite linear;
}

.slide_y img.absol {
  top: 100%;
}

.slide_y_r {
  animation: marqueeY_r 20s infinite linear;
}

.slide_y_r img.absol {
  bottom: 100%;
}

/* y_slide end */
/* flow_sd 가로 (여러 이미지 마퀴) start */
.flow_sd {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.flow_sd_move {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeX 20s infinite linear;
}

.flow_sd_move_r {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeX_r 20s infinite linear;
}

.flow_sd_move_item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flow_sd_move_item02 {
  left: 100%;
}

.flow_sd_move_item02_r {
  right: 100%;
}

.flow_sd_img {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* flow_sd 가로 end */
/* flow_sd 세로 (여러 이미지 마퀴) start */
.flow_sd_y {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.flow_sd_y_move {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeY 10s infinite linear;
}

.flow_sd_y_move_r {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeY_r 10s infinite linear;
}

.flow_sd_y_move_item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.flow_sd_y_move_item02 {
  top: 100%;
}

.flow_sd_y_move_item02_r {
  bottom: 100%;
}

.flow_sd_y_img {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* flow_sd 세로 end */
/* swiper-arr */
.btn_arr {
  z-index: 2;
  cursor: pointer;
}

.arr_next {
  transform: rotateY(180deg);
}

/* swiper-arr */
iframe {
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-lock {
  display: none !important;
}

.swiper {
  margin: 0;
  z-index: 0;
}

b {
  font-weight: 700;
}

.obj > img {
  height: 100%;
  object-fit: cover;
}

.pc-mobile {
  display: flex !important;
}

.mobile-pc {
  display: none !important;
}

.pc {
  display: flex !important;
}

.pc-inline {
  display: inline !important;
}

.tablet {
  display: none !important;
}

.mobile {
  display: none !important;
}

.absol {
  position: absolute;
}

.rltv {
  position: relative;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexrow {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.flexcol {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* ===== 공통 컴포넌트 c_wordblock — 검정 박스 영문 워드 세로 스택 (최초 구현 acon02, 인스턴스 폭·위치는 섹션 CSS) ===== */
.c_wordblock {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  row-gap: 0.8vw;
}

.c_wordblock_item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 100);
  background-color: #000;
}

.c_wordblock_front {
  font-family: var(--font-poppins);
  font-size: calc(var(--px) * 67);
  font-weight: 800;
  line-height: 3.5vw;
  letter-spacing: 0;
  color: #fff;
}

/* ===== 공통 컴포넌트 c_bg_wood — 진갈색 바탕 + 세로 줄무늬 타일 (최초 구현 acon02, 바탕색은 인스턴스별 덮어쓰기) ===== */
.c_bg_wood {
  background-color: var(--color-point);
  background-image: url('/images/acon02_05.png');
  background-repeat: repeat;
  background-size: calc(var(--px) * 20) calc(var(--px) * 20);
}

/* ===== 공통 컴포넌트 video-facade — 유튜브 파사드 (썸네일 → 클릭/Enter·Space 시 nocookie iframe 주입, js/script.js 위임 / 최초 구현 econ02)
   마크업: div.{섹션}_video.video-facade.rltv (크기·aspect-ratio 는 섹션 클래스) > img.video-facade_thumb / 클릭 후 같은 div 에 iframe.video-facade_frame append
   object-fit: cover — 게시판 동적 썸네일(16:9)을 임의 비율 프레임에 채우는 전용 예외 ===== */
.video-facade {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.video-facade_thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-facade_frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@keyframes marquee3 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes blk {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  31% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ddm_m {
  0% {
    transform: scale(1);
  }
  50% {
    transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -15);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes ddm_m_reverse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: matrix(0.8, 0.01, 0.01, 0.8, 0, -5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes blk2 {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes line-top {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(13px);
  }
}

/* 추가된 부분 */
@keyframes line-top-reverse {
  0% {
    transform: translateY(13px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes line-top-rotate {
  0% {
    transform: translateY(13px) rotateZ(0deg);
  }
  100% {
    transform: translateY(13px) rotateZ(45deg);
  }
}

/* 추가된 부분 */
@keyframes line-top-rotate-reverse {
  0% {
    transform: translateY(13px) rotateZ(45deg);
  }
  100% {
    transform: translateY(13px) rotateZ(0deg);
  }
}

@keyframes line-mid {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

/* 추가된 부분 */
@keyframes line-mid-reverse {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes line-mid-invisible {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes line-bot {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-13px);
  }
}

/* 추가된 부분 */
@keyframes line-bot-reverse {
  0% {
    transform: translateY(-13px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes line-bot-rotate {
  0% {
    transform: translateY(-13px) rotateZ(0deg);
  }
  100% {
    transform: translateY(-13px) rotateZ(135deg);
  }
}

/* 추가된 부분 */
@keyframes line-bot-rotate-reverse {
  0% {
    transform: translateY(-13px) rotateZ(135deg);
  }
  100% {
    transform: translateY(-13px) rotateZ(0deg);
  }
}

/* -------------------header 커스텀 시작------------------- */
@keyframes dropHeader {
  0% {
    top: -5rem;
  }
  100% {
    top: 0;
  }
}

@keyframes insertHeader {
  0% {
    top: 0;
  }
  100% {
    top: -7rem;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ===== 상태 전환 공용 — display 로 갈리는 패널·목록이 나타날 때 부드럽게 (탭 전환·페이저 교체 등)
   JS 가 전환 직후 .is_fade_in 을 붙였다 animationend 에 뗀다 (js/community.js · js/menu.js · js/store.js) ===== */
@keyframes fadeSoft {
  from {
    opacity: 0;
    transform: translateY(calc(var(--px) * 12));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.is_fade_in {
  animation: fadeSoft 0.45s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .is_fade_in {
    animation: none;
  }
}

/* ===== 화살표 넛지 — 버튼 호버 시 오른쪽 화살표가 좌→우로 살짝 왕복 (c_btn_more, css/style.css 에서 호출) ===== */
@keyframes arrowNudge {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(var(--px) * 7));
  }
}

/* ===== 모바일 (599 이하) — 공통 컴포넌트 ===== */
@media (max-width: 599px) {
  .c_wordblock {
    row-gap: 1.6vw;
  }

  .c_wordblock_item {
    height: 12.8vw;
  }

  .c_wordblock_front {
    font-size: 8vw;
    line-height: 12.8vw;
  }

  /* 세로선 간격 — PC 20px(--px) 그대로면 375 에서 4px 간격이라 줄이 뭉개짐 → 16px */
  .c_bg_wood {
    background-size: 4.3vw 4.3vw;
  }
}