/* 기멱기멱 링크 페이지 (gimeok.co.kr/gimyeok_gimyeok) — 인포크링크를 옮겨 온 화면
 *   색·글꼴은 ui.css 의 공통 값(--gi-*)을 씁니다. 배경색·글자색·블록 모양은 관리자 '디자인'에서 정합니다
 *   (서버가 <html> 의 --lp-* 값과 class 로 내려줍니다).
 *   375px 세로 화면 기준. 넓은 화면에서는 가운데 480px 기둥으로 보입니다(인포크와 같게). */

:root { --lp-bg: #f0e7cd; --lp-text: #1b1b1b; --lp-r: 14px; --lp-shadow: none; }
.lp-shape-square { --lp-r: 4px; }
.lp-shape-pill   { --lp-r: 32px; }
.lp-shadow-soft   { --lp-shadow: 0 2px 10px rgba(22, 24, 35, .08); }
.lp-shadow-strong { --lp-shadow: 0 6px 20px rgba(22, 24, 35, .16); }

html, body { margin: 0; background: var(--lp-bg); }
body.lp {
  color: var(--lp-text);
  font-family: var(--gi-font, -apple-system, BlinkMacSystemFont, sans-serif);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all; overflow-wrap: anywhere;
}
.lp-font-system body.lp { font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
.lp a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

.lp-wrap {
  max-width: 480px; margin: 0 auto; min-height: 100vh; box-sizing: border-box;
  padding: 14px 16px calc(36px + env(safe-area-inset-bottom));
  position: relative;
}

/* ── 위 버튼 (공유 · 몰 바로가기) ── */
.lp-top { display: flex; justify-content: space-between; height: 36px; }
.lp-ibtn {
  width: 36px; height: 36px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(0, 0, 0, .08); color: inherit; display: grid; place-items: center;
}
.lp-ibtn:active { transform: scale(.94); }

/* ── 프로필 ── */
.lp-profile { text-align: center; margin: 2px 0 18px; }
.lp-avatar {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 10px;
  background: rgba(0, 0, 0, .06); box-shadow: 0 0 0 3px rgba(255, 255, 255, .7);
}
.lp-title { font-size: 22px; font-weight: 800; letter-spacing: var(--gi-track-title, -.03em); margin: 0; }
.lp-bio { font-size: 14px; line-height: 1.55; margin: 8px 0 0; white-space: pre-line; opacity: .85; }
.lp-offer-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  padding: 7px 13px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .85); color: #222; font: inherit; font-size: 12.5px; font-weight: 700;
}
.lp-notice {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 700;
  background: #161823; color: #fff; text-align: center;
}

/* ── SNS 아이콘 줄 ── */
.lp-sns { display: flex; justify-content: center; gap: 14px; margin: 6px 0 14px; }
.lp-sns a { width: 30px; height: 30px; display: grid; place-items: center; opacity: .85; }
.lp-sns-bottom { margin-top: 26px; }

/* ── 블록 공통 ── */
.lp-blocks { display: flex; flex-direction: column; gap: 10px; }
.lp-card {
  display: block; position: relative; background: #fff; color: #1b1b1b;
  border-radius: var(--lp-r); box-shadow: var(--lp-shadow); overflow: hidden;
  transition: transform .12s ease;
}
a.lp-card:active { transform: scale(.985); }
.lp-anim-pop a.lp-card { animation: lpPop .45s ease both; }
@keyframes lpPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 썸네일형 (인포크 기본) — 왼쪽 그림 · 가운데 글 */
.lp-thumb { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 8px; padding: 6px; min-height: 52px; }
.lp-thumb .lp-img {
  width: 52px; height: 52px; border-radius: calc(var(--lp-r) * .7); object-fit: cover; background: #f2f2f2; display: block;
}
.lp-shape-pill .lp-thumb .lp-img { border-radius: 50%; }
.lp-thumb .lp-txt { text-align: center; min-width: 0; }
.lp-align-left .lp-thumb .lp-txt { text-align: left; }
.lp-align-left .lp-thumb { grid-template-columns: 52px 1fr 8px; }
.lp-name { font-size: 14px; font-weight: 600; line-height: 1.38; white-space: pre-line; }
.lp-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }

/* 글자만 */
.lp-simple { padding: 17px 18px; text-align: center; }
.lp-align-left .lp-simple { text-align: left; }

/* 큰 그림 카드 */
.lp-bigcard .lp-hero { width: 100%; aspect-ratio: 1.91; object-fit: cover; display: block; background: #f2f2f2; }
.lp-bigcard .lp-txt { padding: 11px 14px 13px; text-align: center; }
.lp-align-left .lp-bigcard .lp-txt { text-align: left; }

/* 그림 배경 */
.lp-bgcard { min-height: 112px; display: grid; place-items: center; padding: 18px; color: #fff; background-size: cover; background-position: center; }
.lp-bgcard::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .38); }
.lp-bgcard .lp-txt { position: relative; text-align: center; }
.lp-bgcard .lp-name { font-size: 16px; font-weight: 800; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }

/* 스티커 (작은 꼬리표) */
.lp-stickers { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 4px; }
.lp-align-left .lp-stickers { justify-content: flex-start; }
.lp-sticker {
  font-size: 10.5px; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .12);
}

/* ── 몰 상품 ── */
.lp-price { margin-top: 3px; font-size: 13px; display: flex; gap: 5px; justify-content: center; align-items: baseline; flex-wrap: wrap; }
.lp-align-left .lp-price { justify-content: flex-start; }
.lp-price .pct { color: var(--gi-point, #f42b54); font-weight: 800; }
.lp-price .now { font-weight: 800; }
.lp-price .was { color: #9a9a9a; text-decoration: line-through; font-size: 11.5px; }
.lp-pimg { position: relative; display: block; }
.lp-soldout .lp-pimg::after {
  content: '품절'; position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(17, 17, 17, .55); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  border-radius: inherit;
}
.lp-thumb .lp-pimg { width: 52px; height: 52px; border-radius: calc(var(--lp-r) * .7); overflow: hidden; }
.lp-shape-pill .lp-thumb .lp-pimg { border-radius: 50%; }
.lp-bigcard.lp-product .lp-hero { aspect-ratio: 1; }
.lp-soldout .lp-price .now, .lp-soldout .lp-price .pct { color: #9a9a9a; }
.lp-soldout-tag {
  display: inline-block; font-size: 10.5px; font-weight: 800; color: #fff; background: #4b4f5c;
  padding: 2px 6px; border-radius: 5px; margin-left: 2px;
}

/* ── 몰 자동 목록 (오늘 특가 · 예약 상품) — 머리줄 + 상품 칸과 같은 카드들 ── */
.lp-auto { display: flex; flex-direction: column; gap: 8px; }
.lp-auto-h { display: flex; align-items: center; gap: 8px; padding: 6px 2px 0; }
.lp-auto-h h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: var(--gi-track-title, -.03em); }
.lp-auto-timer {
  font-size: 11.5px; font-weight: 800; color: var(--gi-point, #f42b54); background: rgba(255, 255, 255, .85);
  padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lp-auto-timer:empty { display: none; }
.lp-auto-more { margin-left: auto; font-size: 12.5px; font-weight: 700; opacity: .7; white-space: nowrap; }
.lp-open {
  display: inline-block; margin-bottom: 3px; font-size: 10.5px; font-weight: 800; line-height: 1;
  color: #fff; background: var(--gi-point, #f42b54); padding: 4px 8px; border-radius: 999px;
}

/* ── 텍스트 ── */
.lp-text { font-size: 14px; line-height: 1.6; white-space: pre-line; text-align: center; padding: 8px 6px; }
.lp-align-left .lp-text { text-align: left; }

/* ── 이미지 ── */
.lp-image img { width: 100%; display: block; }
.lp-image .lp-cap { padding: 10px 12px; font-size: 13px; text-align: center; }

/* ── 구분선 ── */
.lp-div { margin: 6px 2px; }
.lp-div-dotted { border-top: 1.5px dashed rgba(0, 0, 0, .22); }
.lp-div-line   { border-top: 1px solid rgba(0, 0, 0, .18); }
.lp-div-points { text-align: center; letter-spacing: 6px; font-size: 14px; line-height: 1; opacity: .45; }
.lp-div-space  { height: 10px; }

/* ── 방송 칸 ── */
.lp-live { border-radius: 18px; overflow: hidden; background: #0e1011; color: #fff; box-shadow: var(--lp-shadow); }
.lp-live[hidden] { display: none; }
.lp-live a { display: block; }
.lp-live-media { position: relative; aspect-ratio: 16 / 10; background: #17181a center / cover no-repeat; }
.lp-live-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.75)); }
.lp-live-badge {
  position: absolute; left: 12px; top: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  background: var(--gi-point, #f42b54); color: #fff; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px;
}
.lp-live-badge.soon { background: rgba(255, 255, 255, .16); backdrop-filter: blur(4px); }
.lp-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: lpBlink 1.1s infinite; }
@keyframes lpBlink { 50% { opacity: .25; } }
.lp-live-cap { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; }
.lp-live-title { font-size: 17px; font-weight: 800; line-height: 1.35; }
.lp-live-when { font-size: 12.5px; margin-top: 4px; color: var(--gi-on-dark-2, #dfe0e6); }
.lp-live-body { padding: 12px 14px 14px; }
.lp-live-count { font-variant-numeric: tabular-nums; font-weight: 800; color: #fff; }
.lp-live-items { display: flex; gap: 8px; overflow-x: auto; margin: 0 -2px 12px; padding: 0 2px; scrollbar-width: none; }
.lp-live-items::-webkit-scrollbar { display: none; }
.lp-live-items a { flex: 0 0 76px; font-size: 11px; color: var(--gi-on-dark-2, #dfe0e6); }
.lp-live-items img { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; display: block; margin-bottom: 4px; background: #222327; }
.lp-live-items .p { font-weight: 800; color: #fff; }
.lp-live-btn {
  width: 100%; height: 46px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--gi-point, #f42b54); color: #fff; font: inherit; font-size: 15px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.lp-live-btn.done { background: rgba(255, 255, 255, .14); }
.lp-live-btn.ghost { background: rgba(255, 255, 255, .14); }

/* ── 바닥 ── */
.lp-foot { text-align: center; margin-top: 30px; font-size: 11.5px; opacity: .55; }
.lp-foot a { text-decoration: underline; }

/* ── 제안 창 ── */
.lp-sheet-mask {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .5);
  display: flex; align-items: flex-end; justify-content: center;
}
.lp-sheet {
  width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; box-sizing: border-box;
  background: #fff; color: #161823; border-radius: 20px 20px 0 0;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  animation: lpUp .22s ease both;
}
@keyframes lpUp { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.lp-sheet h2 { font-size: 18px; margin: 0 0 4px; }
.lp-sheet .sub { font-size: 13px; color: #4b4f5c; margin: 0 0 14px; line-height: 1.5; }
.lp-field { display: block; margin-bottom: 10px; }
.lp-field span { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 5px; }
.lp-field input, .lp-field select, .lp-field textarea {
  width: 100%; box-sizing: border-box; border: 1px solid #e3e5ea; border-radius: 10px;
  padding: 11px 12px; font: inherit; font-size: 15px; background: #fff; color: inherit;
}
.lp-field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.lp-field input:focus, .lp-field select:focus, .lp-field textarea:focus { outline: 2px solid #f42b5433; border-color: #f42b54; }
.lp-agree { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: #4b4f5c; margin: 6px 0 4px; }
.lp-agree input { margin-top: 3px; }
.lp-err { min-height: 18px; color: #ef4444; font-size: 12.5px; font-weight: 700; margin: 6px 0; }
.lp-sheet .row { display: flex; gap: 8px; }
.lp-sheet .row button { flex: 1; height: 48px; border-radius: 12px; border: 0; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.lp-sheet .btn-ghost { background: #f4f5f7; color: #161823; }
.lp-sheet .btn-go { background: var(--gi-point, #f42b54); color: #fff; }
.lp-sheet .btn-go:disabled { opacity: .6; }
.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lp-toast {
  position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: rgba(22, 24, 35, .92); color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 11px 16px; border-radius: 12px; z-index: 1100; max-width: 86vw; text-align: center;
}