/* ==========================================================
   와우오더 테이블오더 — 메인 페이지 전용 스타일

   이 페이지의 디자인 규칙
   · 바탕은 따뜻한 종이색(--paper), 강조 구간만 차콜(--coal)로 눌러준다
   · 섹션마다 좌측 상단에 번호(01, 02 …)를 두고 가로선으로 구획한다
   · 카드 남발 대신 가로 규칙선·비대칭 분할·명세서 같은 실물 은유를 쓴다
   · 브랜드 옐로는 강조 한 곳에만 쓴다 (마커, 숫자, 마지막 섹션)
   ========================================================== */

.page-table {
  --paper: #FFFFFF;          /* 기본 바탕 (흰색) */
  --paper-deep: #F1F1F0;     /* 사진 자리 등 한 단계 진한 바탕 */
  --tint: #FAFAFA;           /* 리뷰 구간 바탕 — 흰색과 겨우 구분될 정도로만 */
  --coal: #000000;           /* 어두운 구간 — 사용자 지시로 순수 검정 (2026-09-08) */
  --ink: #1A1A1A;            /* 진한 글씨 · 버튼 */
  --ink-mid: #55524D;        /* 본문 */
  --ink-soft: #8B877F;       /* 흐린 글씨 */
  --line: #E6E6E4;           /* 구분선 */
  --line-dark: rgba(255, 255, 255, 0.13);

  /* 강조색 — 브랜드 옐로.
     밝은 바탕에서는 옅은 노랑이 안 읽히므로 진한 톤(#C49800)을 글씨에 쓰고,
     어두운 바탕과 배지에는 브랜드 옐로(#FDCD27)를 그대로 쓴다. */
  --accent: #C49800;         /* 밝은 바탕 위 글씨 */
  --accent-deep: #9A7300;    /* 링크 호버 */
  --accent-soft: #FFF8D6;    /* 아주 옅은 강조 바탕 */
  --accent-lit: #FDCD27;     /* 어두운 바탕 위 · 배지 바탕 */
  --accent-mute: #FDCD27;    /* 어두운 바탕 위 보조 라벨 */

  background: var(--paper);
  color: var(--ink);
}

/* 넓은 화면에서 내용이 가운데로 몰려 보이지 않도록 기준 폭을 넓힌다.
   좌우 여백은 공통값보다 넉넉하게 — 화면이 커질수록 같이 벌어진다. */
.page-table .inner {
  --pad: 32px;
  max-width: 1440px;
  padding: 0 var(--pad);
}

@media (min-width: 768px)  { .page-table .inner { --pad: 68px; } }
@media (min-width: 1200px) { .page-table .inner { --pad: 110px; } }
@media (min-width: 1600px) { .page-table .inner { --pad: 146px; } }

/* ----- 상단바 (메인 전용) -----
   레퍼런스(페이히어 72 · 히엘페이 88 · 로고 140×30 · 메뉴 16~17px) 사이 크기로 단정하게 — 높이 76(모바일 66), 버튼 44.
   화면 폭 그대로 왼쪽 정렬 — 로고 · 메뉴는 화면 왼쪽 끝에 한 덩어리, 전화 · 도입문의는 오른쪽 끝(좌우 40 · ≤1199 32 · ≤599 20).
   메뉴 사이는 넉넉하게(글자 사이 44), 로고 ↔ 메뉴는 그보다 조금 더(56). */
.page-table #gnb {
  --gnb-logo-w: 128px;          /* 로고(logo-2.svg, 2819×573) 26px 높이일 때 폭 — 아래 판의 글자 줄 맞춤에 쓴다 */
  --gnb-menu-gap: 56px;         /* 로고 끝 ↔ 첫 메뉴 글자 */
  --gnb-item-pad: 22px;         /* 메뉴 한 칸 좌우 여백 — 메뉴 글자 사이 44 */
  --gnb-side: 40px;             /* 상단바 좌우 여백 */
}
@media (max-width: 1199px) { .page-table #gnb { --gnb-side: 32px; } }
@media (max-width: 599px)  { .page-table #gnb { --gnb-side: 20px; } }

.page-table #gnb .inner {
  max-width: none;
  margin: 0;
  padding: 0 var(--gnb-side);
}

/* 판(주요 상품)의 기준을 상단바 전체(#gnb)로 — 그래서 상단바 안쪽 상자들은 static */
.page-table .gnb-bar { position: static; justify-content: flex-start; gap: 0; height: 66px; }
@media (min-width: 1024px) { .page-table .gnb-bar { height: 76px; } }   /* 72는 답답하다 해서 아주 살짝만(버튼 44 위아래 16) */

.page-table .gnb-logo img { height: 22px; }
@media (min-width: 1024px) { .page-table .gnb-logo img { height: 26px; } }

/* 메뉴(주요 상품 · 이벤트 · 블로그) — 로고 바로 옆. 1024px 밑에서는 오른쪽 버튼과 겹치므로 접는다 */
.page-table .gnb-links {
  display: none;
  position: static;
  align-self: stretch;          /* 상단바 높이 전체 — 판이 상단바 바로 아래에서 펼쳐진다 */
  margin-left: calc(var(--gnb-menu-gap) - var(--gnb-item-pad));
  gap: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #171717;               /* 세 메뉴 모두 같은 색 · 굵기 — 지금 페이지라고 다르게 하지 않는다 */
}
@media (min-width: 1024px) { .page-table .gnb-links { display: flex; align-items: stretch; } }

.page-table .gnb-links > a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 var(--gnb-item-pad);
  transition: color 0.2s;
}
/* 마우스를 올린 메뉴만 파랑 — 지금 어디에 있는지 바로 보이게(주요 상품은 판이 열려 있는 동안 파랑) */
.page-table .gnb-links > a:hover,
.page-table .gnb-dd:hover .gnb-dd-btn,
.page-table .gnb-dd:focus-within .gnb-dd-btn { color: #1d63e6; }

/* 오른쪽 — 전화(흰 알약) · 카톡 문의하기(먹색 알약), 높이 44 */
.page-table .gnb-cta { display: flex; margin-left: auto; gap: 8px; }
.page-table .gnb-cta .btn { height: 44px; padding: 0 20px; font-size: 15px; font-weight: 700; }
.page-table .gnb-cta .btn-phone { gap: 6px; padding: 0 18px; box-shadow: none; }
.page-table .gnb-cta .btn-phone .ico { width: 15px; height: 15px; }
@media (max-width: 767px) {
  .page-table .gnb-cta { gap: 6px; }
  .page-table .gnb-cta .btn { height: 36px; padding: 0 12px; font-size: 13px; }
}

/* 주요 상품 — 마우스를 올리면(키보드 포커스 포함) 상단바 아래로 흰 판이 화면 폭 가득 펼쳐지고,
   테이블오더 · QR오더 · 포스기 · 카드단말기가 "주요 상품" 글자 줄에 맞춰 세로로 놓인다(페이히어 방식) */
.page-table .gnb-dd { position: static; display: flex; }
.page-table .gnb-dd-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--gnb-item-pad);
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  transition: color 0.2s;
}
.page-table .gnb-dd-arr {                      /* 둥근 꺾쇠(Solar alt-arrow-down 모양) — 메뉴 글자 굵기에 맞춰 선을 조금 굵게 */
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.25s var(--ease-apple);
}
.page-table .gnb-dd:hover .gnb-dd-arr,
.page-table .gnb-dd:focus-within .gnb-dd-arr { transform: rotate(180deg); }

.page-table .gnb-dd-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 24px 0 32px;
  background: #fff;
  border-top: 1px solid var(--n-200);
  box-shadow: 0 18px 28px -18px rgba(23, 23, 23, 0.16);
  clip-path: inset(0 0 100% 0);                 /* 닫힘 — 위로 접혀 있다 */
  visibility: hidden;
  transition: clip-path 0.3s var(--ease-apple), visibility 0s 0.3s;
}
.page-table .gnb-dd:hover .gnb-dd-menu,
.page-table .gnb-dd:focus-within .gnb-dd-menu {
  clip-path: inset(0 0 -40px 0);                /* 열림 — 아래로 펼쳐짐(그림자까지 보이게) */
  visibility: visible;
  transition: clip-path 0.3s var(--ease-apple), visibility 0s;
}

/* 판 안 — 상단바와 같은 왼쪽 정렬, 목록은 "주요 상품" 글자 시작점에 맞춘다 */
.page-table .gnb-dd-in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: none;
  margin: 0;
  padding: 0 var(--gnb-side) 0 calc(var(--gnb-side) + var(--gnb-logo-w) + var(--gnb-menu-gap));
}
.page-table .gnb-dd-in a,
.page-table .gnb-dd-soon {                     /* 넷 다 같은 크기 · 색 · 굵기 — 지금 페이지도 따로 강조하지 않는다 */
  font-size: 18px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: -0.02em;
  color: #171717;
  white-space: nowrap;
  transition: color 0.2s;
}
.page-table .gnb-dd-soon { cursor: default; }   /* 카드단말기 — 아직 페이지가 없어 누르는 곳은 아님 */

/* 카드단말기 줄 — 이름 │ [토스 심볼] 토스프론트 풀세트 · [네이버페이 N] 네이버커넥트 풀세트
   두 풀세트는 카드단말기의 설명이라 한 단계 작고 회색 — 로고 색이 진해서 같은 크기면 이것만 튀어 보인다 */
.page-table .gnb-dd-row { display: flex; align-items: center; gap: 20px; }
.page-table .gnb-dd-row .gnb-dd-soon::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 16px;
  margin-left: 20px;
  background: #aab3bf;                         /* 카드단말기 │ — 흰 바탕에서 또렷하게 */
  vertical-align: -1px;
}
.page-table .gnb-dd-sub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: -0.02em;
  color: #6b7280;
  white-space: nowrap;
  cursor: default;
  transition: color 0.2s;
}
.page-table .gnb-dd-sub img { flex: none; width: 18px; height: 18px; object-fit: contain; }
/* 카드단말기 페이지가 생겨 줄이 링크가 됨(2026-10-15) — 크기 · 색은 글자일 때와 똑같이 */
.page-table .gnb-dd-in a.gnb-dd-soon { cursor: pointer; }
.page-table .gnb-dd-in a.gnb-dd-sub { font-size: 15px; line-height: 44px; color: #6b7280; cursor: pointer; }
.page-table .gnb-dd-in a.gnb-dd-sub:hover { color: #1d63e6; }

/* 마우스를 올린 항목만 파랑 */
.page-table .gnb-dd-in a:hover,
.page-table .gnb-dd-soon:hover,
.page-table .gnb-dd-sub:hover { color: #1d63e6; }

/* ----- 섹션 공통 뼈대 ----- */
.page-table section {
  position: relative;
  padding: 84px 0;
}

@media (min-width: 768px)  { .page-table section { padding: 120px 0; } }
@media (min-width: 1200px) { .page-table section { padding: 160px 0; } }

/* 섹션 번호 — 가로선과 함께 놓이는 편집형 라벨 */
.sec-no {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 22px;
}

.sec-no::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  max-width: 120px;
}

.sec-no.light { color: var(--accent-mute); }
.sec-no.light::after { background: var(--line-dark); }

/* 큰 제목 공통 — 제목만 Paperlogy, 본문은 Pretendard 로 둔다 */
.page-table h2 {
  font-family: 'Paperozi', "Pretendard Variable", Pretendard, sans-serif;
  font-size: clamp(1.75rem, 5.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.035em;
}

/* 본문 설명 공통 */
.page-table .brands-desc,
.page-table .data-desc,
.page-table .device-desc,
.page-table .func-desc,
.page-table .rv-desc,
.page-table .pos-desc,
.page-table .plan-desc,
.page-table .qna-desc {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-mid);
  margin-top: 20px;
  max-width: 620px;
}

@media (min-width: 768px) {
  .page-table .brands-desc,
  .page-table .data-desc,
  .page-table .device-desc,
  .page-table .func-desc,
  .page-table .rv-desc,
  .page-table .pos-desc,
  .page-table .plan-desc,
  .page-table .qna-desc { font-size: 17px; }
}

/* 브랜드 옐로 마커 */
.mark {
  position: relative;
  display: inline-block;
  z-index: 0;
  white-space: nowrap;
}

.mark::after {
  content: '';
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: 0.08em;
  height: 0.34em;
  z-index: -1;
  background: rgba(22, 24, 26, 0.12);
  border-radius: 0.05em;
  transform: scaleX(0);
  transform-origin: left center;
  animation: mark-draw 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

.mark.dark::after { background: rgba(255, 255, 255, 0.18); }

@keyframes mark-draw {
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mark::after { animation: none; transform: scaleX(1); }
}

/* ----- 분필로 그은 듯한 밑줄 ----- */
.chalk-line {
  position: absolute;
  z-index: 1;                /* 글자(.num-text, 2)보다 뒤 */
  left: -1.5%;
  bottom: 0.09em;          /* 글자 아래쪽에 살짝 걸치도록 올린다 */
  width: 103%;
  height: 0.24em;
  overflow: visible;
  pointer-events: none;
}

.chalk-line path {
  fill: none;
  stroke: var(--accent-lit);
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: chalk-draw 1s cubic-bezier(0.25, 1, 0.35, 1) 0.55s forwards;
}

/* 굵은 본선 + 그 아래 옅게 흩어진 선 */
.cl-main { stroke-width: 6; opacity: 0.95; }
.cl-sub  { stroke-width: 2.4; opacity: 0.45; animation-delay: 0.72s; }

@keyframes chalk-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chalk-line path { animation: none; stroke-dashoffset: 0; }
}

/* ----- 본문 제목에 쓰는 분필 밑줄 -----
   히어로의 밑줄을 낱말 하나에 그대로 옮겨 쓴다. 검은 글자만 이어지는
   섹션에서 시선이 걸릴 자리를 한 군데 만들어 준다.
   화면에 들어오기 전에는 재생을 멈춰 둬야 스크롤해서 왔을 때 그어진다. */
.mark-chalk {
  position: relative;
  display: inline-block;
}

.mark-chalk .mk-text {
  position: relative;
  z-index: 2;                /* 선(1)보다 앞 — 글자 위로 선이 지나가지 않게 */
}

.mark-chalk .chalk-line {
  left: -3%;
  bottom: 0.02em;
  width: 106%;               /* 낱말 밖으로 조금 넘겨 그어야 손으로 그은 느낌이 난다 */
  height: 0.3em;
}

.mark-chalk .cl-main { stroke-width: 7; }
.mark-chalk .cl-sub  { stroke-width: 2.8; }

.mark-chalk .chalk-line path { animation-play-state: paused; }
.mark-chalk.visible .chalk-line path { animation-play-state: running; }

/* 한 제목에 밑줄이 둘이면 동시에 그어져 어수선하다. 뒤엣것을 늦춘다 */
.mark-chalk.is-late .cl-main { animation-delay: 1.05s; }
.mark-chalk.is-late .cl-sub  { animation-delay: 1.22s; }

/* 옛 섹션(브랜드 · 데이터 · 기기 · 기능 · 리뷰 · POS · 가격 · 자주 묻는 질문 · 후기) 스타일은
   2026-10-14 사용자 지시로 섹션과 함께 삭제했다. */