@charset "utf-8";

/* =========================================================
   PC 랜딩(첫 화면) — 넓은 화면 전용 (2026-06-29)
   ---------------------------------------------------------
   ● 이 파일은 main.css / main_app.css 를 "덮어쓰지" 않습니다.
   ● 거의 모든 규칙이 @media (min-width:1100px) 안에서만 동작합니다.
     → 폰/태블릿(좁은 화면)은 지금과 100% 동일하게 보입니다.
   ● 되돌리기(원상복구):
       theme/noble/shop/index.php 에서
         1) 이 파일을 부르는 <link> 한 줄
         2) <aside class="landing-pc"> ... </aside> 블록
       이 두 가지만 지우면 됩니다.
   ========================================================= */


/* 평소(좁은 화면)에는 랜딩을 숨김 — 폰은 지금 앱 화면 그대로 */
.landing-pc { display: none; }


@media screen and (min-width: 1100px) {

  /* ---- 바깥 틀: [왼쪽 랜딩 | 가운데 폰화면] 좌우 배치 ----
     기존엔 .base_container 한 칸만 가운데(margin:auto) 떠 있었음.
     넓은 화면에서만 flex 로 두 칸을 가운데로 모음. */
  .app-mode {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 56px;
    padding: 56px 24px 72px;
    background: #FFF8E8;            /* 허니타임 연노랑 배경 */
    min-height: 100vh;
    box-sizing: border-box;
  }

  /* ---- 가운데 480px 기둥 = '폰 목업' ----
     내용(업체·배너·검색)은 그대로, 겉모양만 폰처럼 테두리·그림자 */
  .app-mode .base_container {
    margin: 0;                                  /* auto 가운데정렬 해제(flex가 정렬) */
    flex: 0 0 var(--app-max-width);             /* 폭 480px 고정 */
    align-self: flex-start;
    border-radius: 34px;
    border: 10px solid #ffffff;
    box-shadow: 0 18px 55px rgba(90, 58, 30, 0.18);
    overflow: hidden;                           /* 둥근 모서리 밖으로 안 새게 */
  }

  /* ---- 왼쪽 랜딩 패널 ---- */
  .landing-pc {
    display: block;
    flex: 0 1 460px;
    align-self: flex-start;
    position: sticky;                           /* 폰화면을 스크롤해도 왼쪽은 따라옴 */
    top: 56px;
    color: #5A3A1E;                             /* 허니타임 갈색 */
  }
  .landing-pc .landing-inner { max-width: 460px; }

  .landing-pc .landing-logo { display: inline-block; }
  .landing-pc .landing-logo img {
    height: 46px;
    width: auto;
    margin-bottom: 30px;
  }

  .landing-title {
    margin: 0 0 18px;
    font-size: 40px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.6px;
    color: #5A3A1E;
    word-break: keep-all;
  }

  .landing-sub {
    margin: 0 0 30px;
    font-size: 18px;
    line-height: 1.55;
    color: #8a6b46;
    word-break: keep-all;
  }

  /* 강조박스: 흰 바탕 + 노랑 테두리 */
  .landing-promo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 30px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1.5px solid #E0A41C;
    border-radius: 14px;
    font-size: 16px;
    line-height: 1.5;
    color: #5A3A1E;
    box-shadow: 0 4px 14px rgba(224, 164, 28, 0.12);
  }
  .landing-promo b { color: #E0A41C; font-weight: 800; }
  .landing-promo .lp-badge {
    flex: 0 0 auto;
    padding: 4px 11px;
    border-radius: 999px;
    background: #E0A41C;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }

  /* 회원가입 / 입점문의 버튼 줄 (가로 나란히, 좁아지면 자동 줄바꿈) */
  .landing-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 38px;
  }

  /* 버튼 공통 (회원가입 = 골드 꽉 찬 버튼) */
  .landing-cta {
    display: inline-block;
    margin: 0;
    padding: 16px 46px;
    border: 2px solid transparent;       /* 입점문의(테두리형)와 높이 동일하게 맞추는 용도 */
    border-radius: 999px;
    background: #E0A41C;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(224, 164, 28, 0.35);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .landing-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(224, 164, 28, 0.45);
  }

  /* 입점문의 = 테두리형 (배경 투명·골드 테두리·골드 글자). 크기·높이는 .landing-cta 와 동일 */
  .landing-cta.landing-cta-outline {
    background: transparent;
    border-color: #E0A41C;
    color: #E0A41C;
    box-shadow: none;
  }
  .landing-cta.landing-cta-outline:hover {
    transform: translateY(-2px);
    background: rgba(224, 164, 28, 0.08);
    box-shadow: none;
  }

  /* 관리자 전용: 입점문의 링크 수정 버튼 (방문자에겐 HTML 자체가 출력되지 않음) */
  .landing-admin-edit { margin: 0 0 12px; }
  .landing-admin-edit a {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid #E0A41C;
    background: #ffffff;
    color: #5A3A1E;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }
  .landing-admin-edit a:hover { background: #FFF8E8; }
  .landing-admin-edit .landing-admin-note {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 8px;
    background: #fff6f6;
    border: 1px dashed #e0a0a0;
    color: #b05050;
    font-size: 12px;
  }

  /* 방문자 통계: 오늘 / 어제 / 총 */
  .landing-stats {
    display: flex;
    gap: 14px;
    margin: 0;
  }
  .landing-stats > div {
    flex: 1;
    padding: 16px 12px;
    border-radius: 14px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 4px 14px rgba(90, 58, 30, 0.08);
  }
  .landing-stats dt {
    margin-bottom: 6px;
    font-size: 13px;
    color: #8a6b46;
  }
  .landing-stats dd {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #E0A41C;
  }
}


/* 아주 넓은 화면에서는 두 칸 사이 간격만 살짝 더 */
@media screen and (min-width: 1500px) {
  .app-mode { gap: 90px; }
}