/* ===== Guide Home (NHN-commerce-ish) ===== */
/* ✅ 가이드 홈(/guide) 페이지의 전체적인 톤/레이아웃을 잡는 CSS */

/* -------------------------------------------------
   [페이지 전체 컨테이너]
   ------------------------------------------------- */
.g-page{
  background:#fff;            /* ✅ 페이지 배경색 (흰색) */
  color:#111;                 /* ✅ 기본 텍스트 색(진한 검정) */
  padding: 70px 18px 70px;    /* ✅ 페이지 내부 여백(위/좌우/아래)
                                 - 위/아래를 늘리면 “숨 쉬는 공간”이 커짐
                                 - 좌우(18px)를 줄이면 카드가 화면 끝에 더 붙음 */
}

/* -------------------------------------------------
   [가운데 정렬 + 최대 폭 제한]
   ------------------------------------------------- */
.g-wrap{
  max-width: 1080px;          /* ✅ 콘텐츠 최대 폭(너무 넓어지지 않게)
                                 - 값을 늘리면 한 줄에 더 넓게 퍼짐
                                 - 값을 줄이면 더 ‘컴팩트’한 느낌 */
  margin: 0 auto;             /* ✅ 좌우 가운데 정렬 */
}

/* -------------------------------------------------
   [상단 타이틀(가이드)]
   ------------------------------------------------- */
.g-title{
  text-align: center;         /* ✅ 텍스트 중앙 정렬 */
  font-weight: 800;           /* ✅ 글자 두께(굵게)
                                 - 900으로 하면 더 묵직하게 */
  letter-spacing: 0px;     /* ✅ 자간(음수면 더 촘촘)
                                 - -0.2px 정도로 줄이면 덜 압축됨 */
  font-size: 38px;            /* ✅ 타이틀 크기
                                 - 크게 하면 히어로 느낌, 작게 하면 미니멀 */
  margin: 10px 0 100px;        /* ✅ 타이틀 위/아래 여백(특히 아래 34px가 카드와 거리)
                                 - 아래를 줄이면 타이틀과 카드가 더 붙음 */
}

/* -------------------------------------------------
   [카드 그리드 레이아웃]
   ------------------------------------------------- */
.g-grid{
  display: grid;                              /* ✅ CSS Grid 사용 */
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* ✅ 데스크탑 4열
                                                        - 3으로 바꾸면 3열
                                                        - 5로 바꾸면 5열 */
  gap: 40px;                                  /* ✅ 카드 간 간격
                                                 - 줄이면 촘촘, 늘리면 여유 */
}

/* -------------------------------------------------
   [카드 기본 스타일]
   ------------------------------------------------- */
.g-card{
  display:block;               /* ✅ a태그를 블록화해서 카드 전체가 클릭되게 */
  text-decoration:none;        /* ✅ 링크 밑줄 제거 */
  background:#f7f8fa;          /* ✅ 카드 배경(연한 회색 톤)
                                 - 더 하얗게(#fff)에 가까우면 깔끔
                                 - 더 회색이면 분리감 커짐 */
  border-radius: 16px;         /* ✅ 모서리 둥글기
                                 - 12px: 좀 더 각진 느낌
                                 - 20px+: 더 부드럽고 카드 느낌 강화 */
  padding: 24px 24px 22px;     /* ✅ 카드 내부 여백(상/좌우/하)
                                 - 좌우 늘리면 텍스트가 덜 답답 */
  min-height: 210px;           /* ✅ 카드 최소 높이(카드 높이 통일)
                                 - 늘리면 카드가 더 큼직, 줄이면 컴팩트 */
  transition: transform .12s ease,
              box-shadow .12s ease,
              background .12s ease; /* ✅ hover 애니메이션 속도/부드러움 */
  color:#111;                  /* ✅ 카드 텍스트 색(기본 검정) */
}

/* -------------------------------------------------
   [카드 Hover(마우스 올렸을 때)]
   ------------------------------------------------- */
.g-card:hover{
  background:#f4f6f9;                          /* ✅ hover 시 배경색 살짝 변경 */
  transform: translateY(-1px);                 /* ✅ 위로 1px 떠오르는 느낌(인터랙션) */
  box-shadow: 0 8px 24px rgba(0,0,0,.06);      /* ✅ 그림자(떠오르는 효과)
                                                 - 숫자 키우면 더 강한 입체감
                                                 - rgba 낮추면 더 미니멀 */
}

/* -------------------------------------------------
   [아이콘 칩(카드 좌측 상단의 작은 하얀 박스)]
   ------------------------------------------------- */
.g-card-icon{
  width: 42px;                 /* ✅ 칩 가로 */
  height: 42px;                /* ✅ 칩 세로(가로와 같으면 정사각형) */
  border-radius: 10px;         /* ✅ 칩 둥글기 */
  background: #fff;            /* ✅ 칩 배경(흰색) */
  display:flex;                /* ✅ 내부 아이콘을 가운데 정렬하기 위해 flex 사용 */
  align-items:center;          /* ✅ 세로 가운데 */
  justify-content:center;      /* ✅ 가로 가운데 */
  border: 1px solid rgba(0,0,0,.06); /* ✅ 칩 테두리(은은하게)
                                        - 더 진하게 하면 칩이 더 또렷 */
  color:#111;                  /* ✅ 아이콘(텍스트)의 색 */
}

/* -------------------------------------------------
   [아이콘 래퍼(현재 구조에서는 사용 안 해도 됨)]
   ------------------------------------------------- */
.g-icon{
  display:inline-flex;         /* ✅ 아이콘을 inline-flex로 정렬 */
  align-items:center;          /* ✅ 세로 가운데 */
  justify-content:center;      /* ✅ 가로 가운데 */
  /* ✅ 참고: 현재 guide.py는 g-emoji를 쓰고 있어 g-icon은 미사용일 수 있음 */
}

/* -------------------------------------------------
   [카드 텍스트 영역 래퍼]
   ------------------------------------------------- */
.g-card-body{
  margin-top: 18px;            /* ✅ 아이콘 칩과 텍스트 사이 간격
                                 - 줄이면 더 촘촘, 늘리면 더 여유 */
}

/* -------------------------------------------------
   [카드 제목]
   ------------------------------------------------- */
.g-card-title{
  font-size: 18px;             /* ✅ 제목 크기 */
  font-weight: 900;            /* ✅ 제목 굵기(강조) */
  letter-spacing: -0.3px;      /* ✅ 제목 자간(조금 타이트) */
  line-height: 1.25;           /* ✅ 줄간격(제목이 2줄 될 때 보기 좋게) */
  margin-bottom: 8px;          /* ✅ 제목-설명 사이 간격 */
}

/* -------------------------------------------------
   [카드 설명(서브텍스트)]
   ------------------------------------------------- */
.g-card-desc{
  font-size: 14px;             /* ✅ 설명 글자 크기 */
  color: #6b7280;              /* ✅ 설명 텍스트 색(회색) */
  line-height: 1.5;            /* ✅ 줄간격(가독성) */
  margin-bottom: 14px;         /* ✅ 설명-링크 사이 간격 */
}

/* -------------------------------------------------
   [하단 링크(도움말 보기 →)]
   ------------------------------------------------- */
.g-card-link{
  font-size: 14px;             /* ✅ 링크 크기 */
  font-weight: 700;            /* ✅ 링크 굵기(강조) */
  color: #2563eb;              /* ✅ 링크 색(블루 포인트)
                                 - 브랜드 컬러로 바꾸면 통일감↑ */
  display:inline-flex;         /* ✅ 텍스트와 화살표를 한 줄로 */
  align-items:center;          /* ✅ 세로 가운데 */
  gap: 2px;                    /* ✅ 텍스트-화살표 간 간격 */
}

/* 링크의 화살표(→)만 더 두껍게 보이도록 */
.g-card-arrow{
  font-weight: 900;            /* ✅ 화살표 강조 */
}

/* -------------------------------------------------
   [반응형: 화면이 좁아지면 컬럼 수를 줄임]
   ------------------------------------------------- */
@media (max-width: 1100px){
  .g-grid{ 
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* ✅ 1100px 이하: 3열 */
  }
}

@media (max-width: 840px){
  .g-title{ 
    font-size: 34px;           /* ✅ 타이틀 크기 축소(모바일에서 과하게 크지 않게) */
  }
  .g-grid{ 
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* ✅ 840px 이하: 2열 */
  }
}

@media (max-width: 480px){
  .g-title{ 
    font-size: 28px;           /* ✅ 더 작은 모바일에서 타이틀 축소 */
    margin-bottom: 26px;       /* ✅ 타이틀-카드 간격도 조금 줄임 */
  }
  .g-grid{ 
    grid-template-columns: 1fr; /* ✅ 480px 이하: 1열(세로 리스트처럼) */
  }
}

/* -------------------------------------------------
   [아이콘 텍스트(이모지/문자) 스타일]
   ------------------------------------------------- */
.g-emoji{
  font-size: 16px;             /* ✅ 아이콘(이모지/문자) 크기
                                 - 18~20px로 키우면 더 또렷 */
  font-weight: 800;            /* ✅ 문자 아이콘(</>) 같은 경우 굵기 영향 큼 */
  letter-spacing: -0.2px;      /* ✅ 문자 간격을 타이트하게 */
  line-height: 1;              /* ✅ 세로 정렬 안정화(칩 중앙에 잘 오게) */
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  /* ✅ 폰트 폴백:
     - 텍스트 아이콘(</>)이 ‘폰트에 따라’ 두께/모양이 달라서
       시스템 폰트 순서를 지정해 일관성을 높임 */
}

/* -------------------------------------------------
   [Platform guide - screen slider]
   ------------------------------------------------- */
.guide-screen-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #2563eb;
}

.guide-screen-title{
  margin-top: 8px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  color: #101828;
}

.guide-screen-note{
  font-size: 12px;
  line-height: 1.7;
  color: #667085;
}

.guide-screen-head{
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 0;
}

.guide-screen-head .guide-screen-title{
  margin-top: 0;
}

.guide-screen-note--inline{
  margin-top: 0;
}

.guide-screen-viewport{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,.75);
  margin-top: 14px;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-screen-image-single{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

/* -------------------------------------------------
   [Platform guide - shared typography]
   ------------------------------------------------- */
.platform-guide-page{
  background: #f7f9fc;
  color: #101828;
  font-size: 15px;
}

.platform-guide-page *,
.g-page *{
  letter-spacing: 0 !important;
}

.platform-guide-page h1{
  font-size: clamp(2rem, 4vw, 2.7rem) !important;
  line-height: 1.2 !important;
}

.platform-guide-page [style*="font-size: 32px"],
.platform-guide-page [style*="font-size: 30px"],
.platform-guide-page [style*="font-size: 28px"],
.platform-guide-page [style*="fontSize: 32px"],
.platform-guide-page [style*="fontSize: 30px"],
.platform-guide-page [style*="fontSize: 28px"]{
  font-size: 28px !important;
  line-height: 1.3 !important;
}

.platform-guide-page [style*="font-size: 26px"],
.platform-guide-page [style*="font-size: 24px"],
.platform-guide-page [style*="fontSize: 26px"],
.platform-guide-page [style*="fontSize: 24px"]{
  font-size: 24px !important;
  line-height: 1.35 !important;
}

.platform-guide-page [style*="font-size: 22px"],
.platform-guide-page [style*="font-size: 21px"],
.platform-guide-page [style*="font-size: 20px"],
.platform-guide-page [style*="fontSize: 22px"],
.platform-guide-page [style*="fontSize: 21px"],
.platform-guide-page [style*="fontSize: 20px"]{
  font-size: 20px !important;
  line-height: 1.4 !important;
}

.platform-guide-page [style*="font-size: 18px"],
.platform-guide-page [style*="fontSize: 18px"]{
  font-size: 18px !important;
  line-height: 1.45 !important;
}

.platform-guide-page [style*="font-size: 16px"],
.platform-guide-page [style*="font-size: 15px"],
.platform-guide-page [style*="fontSize: 16px"],
.platform-guide-page [style*="fontSize: 15px"]{
  font-size: 15px !important;
  line-height: 1.8 !important;
}

.platform-guide-page [style*="font-size: 14px"],
.platform-guide-page [style*="font-size: 13px"],
.platform-guide-page [style*="font-size: 12px"],
.platform-guide-page [style*="fontSize: 14px"],
.platform-guide-page [style*="fontSize: 13px"],
.platform-guide-page [style*="fontSize: 12px"]{
  font-size: 13px !important;
  line-height: 1.65 !important;
}