/* =========================================================
   menu.css - 메뉴 관련 (공통 변수/레이아웃, 헤더, 네비게이션, 메가 드롭다운)
   ========================================================= */

:root{
  --inpp-red:#f5402c;
  --inpp-blue:#2f6fd6;
  --inpp-navy:#1f4fa0;
  --inpp-line:#e5e7eb;
  --inpp-label-bg:#f7f8fa;
  --inpp-gray-text:#8a93a3;

  /* 최상단 이벤트 배너(#extra-ad) 높이. 배너가 있는 페이지에서만 site-header 가 실제 높이로 덮어쓰고,
     닫기(#close-extra-ad) 하면 스크립트가 0px 으로 되돌린다. 헤더/GNB/본문 여백이 이 값을 따라간다. */
  --inpp-topad-h:0px;
}

/* ===== 공통 레이아웃 ===== */
.inpp-wrap{width:1140px; margin:0 auto;}

/* ===== 상단 헤더 ===== */
/* 고정 헤더(62px)+GNB(49px)만큼 본문을 밀어냄 — 헤더 스크롤 고정 */
body{padding-top:calc(111px + var(--inpp-topad-h)) !important;} /* guide.css body{padding:0 !important} 상쇄 */
.inpp-top-header{position:fixed; top:var(--inpp-topad-h); left:0; right:0; z-index:1001; background:#fff;}

/* 최상단 이벤트 배너 — 레거시 #extra-ad 를 헤더 위에 고정으로 얹는다.
   z-index 는 헤더(1001)보다 위, 사이드탭(1025)보다 아래 — 레거시 퀵메뉴가 배너 우측을 덮던 것과 동일 */
/* overflow:hidden 필수 — slick 초기화 전에는 슬라이드 34장이 세로로 쌓여 2000px 넘게 그려진다.
   배너가 헤더보다 위(z-index)라 그대로 두면 초기화 전까지 로고/GNB 를 덮어 깜빡인다. */
.inpp-topad{position:fixed; top:0; left:0; right:0; z-index:1002; overflow:hidden;}
.inpp-top-header .inpp-wrap{display:flex; align-items:center; justify-content:space-between; height:62px;}
.inpp-logo img{
  display:block; 
  /*height:30px;*/
}
.inpp-top-util{display:flex; align-items:center; gap:18px;}
.inpp-search-box{position:relative;}
.inpp-search-box input{width:174px; height:30px; border:none; border-radius:15px; background:#eef1f6; padding:0 38px 0 16px; font-size:13px; color:#555;}
.inpp-search-box input::placeholder{color:#909193;}
.inpp-search-box input:focus{outline:1px solid #367FD4 !important; outline-offset:-1px;}
.inpp-search-box i{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:#7d8084; font-size:16px; cursor:pointer;}
/* 상단 검색 자동완성 (데이터: 전체메뉴 링크) — 스크롤바 숨김 + 하단 "더보기" 화살표로 스크롤 유도 */
.inpp-search-list{position:absolute; top:100%; left:0; margin-top:6px; width:320px; background:#fff; border:1px solid #d6dbe1; box-shadow:0 6px 18px rgba(0,0,0,.12); z-index:1000; display:none;}
.inpp-search-scroll{max-height:420px; overflow-y:auto; scrollbar-width:none;}   /* Firefox */
.inpp-search-scroll::-webkit-scrollbar{display:none;}                            /* Chrome/Safari */
.inpp-search-list a{display:flex; align-items:center; gap:8px; padding:9px 14px; font-size:13px; color:#333; text-decoration:none;}
.inpp-search-list a .cat{color:#8b93a1; font-size:12px; flex-shrink:0;}
.inpp-search-list a:hover, .inpp-search-list a.active{background:#f2f6fb;}
.inpp-search-list .none{padding:12px 14px; font-size:13px; color:#999;}

/* ── 우측 사이드탭 (form_v2 공용, site-quick.blade.php — 레거시 orderquick 대체) ── */
/* z-index 1025 = 레거시 #quick-menu 와 동일. 첫 이용안내 레이어(#quick-first-user, 1021)가
   레거시처럼 사이드탭 '아래'로 슬라이드해 들어가려면 1021 보다 커야 한다. (헤더 1001·GNB 1000 보다도 위) */
.inpp-side-tab{position:fixed; right:0; top:0; bottom:0; width:86px; z-index:1025;
  background:#fff; border:1px solid #e8eaef; box-shadow:0 2px 12px rgba(0,0,0,.06);
  display:flex; flex-direction:column; align-items:center; padding:20px 0 14px; gap:18px; overflow-y:auto; scrollbar-width:none;}
.inpp-side-tab::-webkit-scrollbar{display:none;}
.inpp-side-tab .ist-item{display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; flex-shrink:0;}
.inpp-side-tab .ist-ic{position:relative; width:46px; height:46px; display:block;}
.inpp-side-tab .ist-ic img{width:100%; height:100%; display:block;}
.inpp-side-tab .ist-ic img.ho{display:none;}
/* 호버 이미지(_hover)가 있는 항목만 노멀 이미지를 숨긴다.
   첫 이용안내(guide.svg)처럼 호버 짝이 없는 아이콘까지 숨기면 빈칸이 됐었다. */
.inpp-side-tab .ist-item:hover .ist-ic:has(img.ho) img.no{display:none;}
.inpp-side-tab .ist-item:hover .ist-ic img.no + img.ho{display:block;}
.inpp-side-tab .ist-lb{font-size:11px; color:#555; white-space:nowrap;}
.inpp-side-tab .ist-item:hover .ist-lb{color:#1279bd;}
.inpp-side-tab .ist-top{margin-top:auto; gap:2px;}
.inpp-side-tab .ist-top i{font-size:17px; color:#333;}
.inpp-side-tab .ist-top .ist-lb{font-size:12px; color:#333;}
.inpp-search-more{position:absolute; left:0; right:0; bottom:0; height:36px; display:none; align-items:flex-end; justify-content:center; padding-bottom:3px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 75%); pointer-events:none; color:#8b93a1; font-size:15px;}
.inpp-top-util .inpp-util-links{font-size:13px; color:#555; white-space:nowrap;}
.inpp-top-util .inpp-util-links a{color:#555;}
.inpp-top-util .inpp-util-links .inpp-sep{color:#d0d4da; margin:0 8px;}
.inpp-top-util .inpp-util-links .inpp-user-name{font-weight:600; color:#333;}
.inpp-top-util .inpp-util-links .inpp-cart-cnt{display:inline-block; min-width:18px; height:18px; line-height:18px; padding:0 5px; border-radius:9px; background:#f5402c; color:#fff; font-size:11px; font-weight:600; text-align:center; vertical-align:1px;}

/* ===== 메인 네비게이션 ===== */
.inpp-gnb{border-bottom:1px solid #e8e8e8; position:fixed; top:calc(62px + var(--inpp-topad-h)); left:0; right:0; z-index:1000; background:#fff;}
.inpp-gnb .inpp-wrap{display:flex; align-items:center; height:48px;}
.inpp-gnb .inpp-menu-btn{font-size:20px; color:#333; margin-right:10px; cursor:pointer;}
.inpp-gnb .inpp-wrap > ul{display:flex; align-items:center; gap:0; flex:1;} /* 최상위 메뉴 ul만(메가 메뉴 내부 ul 제외) */
.inpp-gnb ul li{position:relative;}
.inpp-gnb .inpp-wrap > ul > li > a{display:block; padding:0 14px; font-size:15px; font-weight:500; color:#2b2b2b; line-height:46px; font-family:'Noto Sans KR',-apple-system,sans-serif;} /* 최상위 메뉴 링크에만 적용 */
.inpp-gnb ul li.inpp-active a{color:#000;}
.inpp-gnb ul li a .inpp-ic{margin-right:3px;}
.inpp-gnb ul li a.inpp-goods .inpp-ic{color:#ff8a00;}
.inpp-gnb ul li a .inpp-ic-img{width:16px; height:16px; vertical-align:-2px; margin-right:3px;} /* 아이콘 대체 이미지(굿즈 stars.svg 등) */
.inpp-gnb ul li a.inpp-special{color:var(--inpp-navy);}
.inpp-gnb ul li a.inpp-special .inpp-ic{color:var(--inpp-navy);}
.inpp-gnb ul li a.inpp-quote .inpp-ic{color:var(--inpp-red);}
.inpp-gnb ul li:has(a.inpp-quote){margin-left:auto;} /* 별도견적: 오른쪽 정렬 */
.inpp-gnb ul li:has(a.inpp-quote) a{padding-right:0;} /* 우측 끝에 딱 붙도록 오른쪽 여백 제거 */

/* ===== 책자 메가 드롭다운 (마우스 오버) ===== */

.inpp-gnb ul li.inpp-has-mega{position:static;} /* 메가를 .inpp-gnb 기준 전체폭으로 펼치기 위함 */
.inpp-mega{display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-top:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8; box-shadow:0 10px 18px rgba(0,0,0,.06); z-index:40;}
/* 라벨과 패널 사이 빈틈을 메우는 투명 브릿지: 마우스가 내려올 때 :hover 끊김 방지 */
.inpp-mega::before{content:""; position:absolute; left:0; right:0; top:-10px; height:10px;}
.inpp-gnb ul li.inpp-has-mega:hover .inpp-mega{display:block;}
/* 전체보기(3선) 메가: 호버 시 표시 */
.inpp-gnb .inpp-menu-btn{position:static;} /* 메가를 .inpp-gnb 기준 전체폭으로 */
.inpp-gnb .inpp-menu-btn:hover .inpp-allmenu-mega{display:block;}
.inpp-allmenu-inner{width:1140px; margin:0 auto; padding:0 0 16px;}
.inpp-allmenu-tabs{display:flex; gap:10px; padding:14px 0;}
.inpp-allmenu-tabs a{flex:1; text-align:center; border:1px solid #dfe3ea; border-radius:4px; padding:11px 0; font-size:14px; color:#555; background:#fff; text-decoration:none; font-family:'Noto Sans KR',sans-serif;}
.inpp-allmenu-tabs a.active{background:#eef3fb; border-color:#bcd4ef; color:#1f4fa0; font-weight:600;}
.inpp-allmenu-body{max-height:540px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#cfd4dc transparent;} /* Firefox */
/* WebKit(Chrome/Edge/Safari) 가늘고 심플한 스크롤바 */
.inpp-allmenu-body::-webkit-scrollbar{width:6px;}
.inpp-allmenu-body::-webkit-scrollbar-track{background:transparent;}
.inpp-allmenu-body::-webkit-scrollbar-thumb{background:#cfd4dc; border-radius:3px;}
.inpp-allmenu-body::-webkit-scrollbar-thumb:hover{background:#aab1bd;}
.inpp-allmenu-sec{padding:14px 0;}
.inpp-allmenu-sec + .inpp-allmenu-sec{border-top:1px solid #eef0f3;}
.inpp-allmenu-sec > h3{font-size:18px; font-weight:700; color:#1a1a1a; margin:0 0 8px; font-family:'Noto Sans KR',sans-serif;}
.inpp-allmenu-row{display:flex; align-items:flex-start; padding:7px 0; font-size:13px; line-height:1.5;}
.inpp-allmenu-row .cat{width:120px; flex:0 0 120px; color:#333; font-weight:500;}
.inpp-allmenu-row .sep{color:#d8dce3; margin-right:16px;}
.inpp-allmenu-row .items{flex:1; display:flex; flex-wrap:wrap; gap:6px 22px;}
.inpp-allmenu-row .items a{color:#555; text-decoration:none; white-space:nowrap;}
.inpp-allmenu-row .items a:hover{color:#1279bd;}
.inpp-allmenu-new{display:inline-block; border:1px solid #f5402c; color:#f5402c; font-size:9px; font-weight:700; padding:0 3px; border-radius:2px; margin-left:4px; vertical-align:middle; line-height:1.4;}
.inpp-allmenu-low{display:inline-block; background:#f5402c; color:#fff; font-size:9px; font-weight:700; padding:1px 4px; border-radius:2px; margin-left:4px; vertical-align:middle; line-height:1.3;}
.inpp-allmenu-n{display:inline-block; width:14px; height:14px; line-height:14px; text-align:center; background:#f5402c; color:#fff; font-size:9px; font-weight:700; border-radius:50%; margin-left:5px; vertical-align:middle;}
/* 내비의 .inpp-gnb .inpp-wrap(height:48px; flex) 영향을 받지 않도록 전용 컨테이너 사용 */
.inpp-mega-inner{width:1140px; margin:0 auto;}
.inpp-mega-top{padding:22px 0 50px;}          /* 카드 줄 ↔ 라인 50px */
.inpp-mega-sep{border-top:1px solid #e8e8e8;} /* 콘텐츠 영역이 아닌 패널 전체폭 구분선 */
.inpp-mega-bottom{padding:36px 0 36px;}       /* 라인 ↔ 교정출력 36px, 교정출력 아래 36px */ /* 교정출력 줄 아래 여백 36px */
.inpp-mega-row{display:flex; justify-content:space-between; width:1024px; max-width:100%; margin:0 auto;} /* 카드 영역 1024px 가운데 정렬, 4개 균등 간격(원본 240px 유지) */
.inpp-mega-card{flex:0 0 auto; line-height:0;} /* 늘이지 않음 → 원본 크기 유지(스케일/블러 방지) */
.inpp-mega-card img{display:block;} /* 원본(240x220) 그대로, 스케일 없음 */
/* 책자 카드: 240x180 순수 코딩(배경이미지 X). 썸네일은 카드 뒤 레이어에서 hover 시 떠오름 */
.inpp-book-row{padding-top:42px;} /* 썸네일이 카드 위로 튀어나오는 공간 */
.inpp-book-card{position:relative; display:block; width:240px; text-decoration:none;}
.inpp-book-card .bc-thumb{position:absolute; bottom:78px; right:0; z-index:1; transition:transform .25s ease; filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));} /* 회색 헤드 위, 컬러바 뒤 (바닥이 컬러바에 13px 물림). 우측 밀착 — 긴 제목(스탠드 달력(가로형) 등)이 썸네일에 가리지 않게 */
.inpp-book-card:hover .bc-thumb{transform:translateY(-8px);} /* 컬러바 뒤에서 살짝 올라옴 */
.inpp-book-card .bc-body{position:relative; display:flex; flex-direction:column; width:240px; height:180px; box-sizing:border-box; border-radius:10px; background:#f4f5f7;} /* z-index 없음: 배경은 썸네일 아래에 깔림 */
.inpp-book-card .bc-head{padding:6px 18px 0;}
/* 카드 제목(무선책자·스탠드 달력·명화 액자 …) — 책자/달력/액자 드롭메뉴가 이 규칙을 공유한다 */
.inpp-book-card .bc-head b{display:block; font-size:16px; line-height:24px; color:#222; font-weight:500;}
.inpp-book-card .bc-head b::after{content:""; display:block; height:1px; background:#dfe3e9; margin-top:4px;} /* 제목 아래 구분선 */
.inpp-book-card .bc-en{display:block; margin-top:12px; font-size:10px; color:#8b93a1;}
.inpp-book-card .bc-bar{position:relative; z-index:2; display:flex; margin-top:auto; height:91px; box-sizing:border-box; border-radius:0 0 10px 10px; padding:12px 4px; color:#fff;} /* 썸네일보다 위 → 썸네일 하단을 가림 */
.inpp-book-card .bc-col{flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:0 4px; text-align:center; font-size:12px; line-height:1.4;} /* 세로 구분선 중앙 고정(50:50) */
.inpp-book-card .bc-col span{white-space:nowrap;} /* 의도한 <br> 외 강제 줄바꿈 방지 */
.inpp-calendar .inpp-bc-blue .bc-col{font-size:11px;} /* 코딱지 달력: 긴 문구가 반쪽 폭을 넘어 구분선을 밀어내는 것 방지(5:5 유지) */
.inpp-calendar .inpp-bc-cyan .bc-thumb{bottom:62px;} /* 벽걸이 달력: 썸네일(141px로 가장 김) 시작 위치를 16px 아래로 */
.inpp-book-card .bc-col + .bc-col{border-left:1px solid rgba(255,255,255,.4);}
.inpp-book-card .bc-ic{display:block; max-height:35px; width:auto;} /* 아이콘 이미지(book1_1~book4_2.png), 원본 크기 유지 */
.inpp-book-card .bc-col span{color:#fff;} /* reset.css의 html *{color:#525252} 무효화 */
.inpp-bc-blue  .bc-bar{background:#367FD4;}
.inpp-bc-amber .bc-bar{background:#E6A959;}
.inpp-bc-purple .bc-bar{background:#9187D6;}
.inpp-bc-cyan  .bc-bar{background:#359BD1;}
/* 제본별 교정출력 주문 버튼(책자 탭 카드 아래 4열 — 책자드롭다운.png) */
.inpp-book-proof-row{margin-top:14px; padding-bottom:6px;}
.inpp-bp{display:flex; align-items:center; justify-content:space-between; width:240px; height:40px; box-sizing:border-box;
         padding:0 9px 0 14px; border:1px solid; border-radius:8px; background:#fff;
         text-decoration:none; font-size:13px; font-weight:400; color:#222;}
.inpp-bp span{color:#222;} /* reset.css 기본색 무효화 */
.inpp-bp span b{font-weight:700; color:#222;} /* '교정출력 주문하기'만 볼드 */
.inpp-bp .bp-arrow{display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; font-size:11px; color:#fff;} /* 화살표는 4종 모두 흰색 */
/* 보더·화살표 원 배경 = 카드색 67% (시안 지정값) */
.inpp-bp-blue  {border-color:rgba(54,127,212,.67);}  .inpp-bp-blue  .bp-arrow{background:rgba(54,127,212,.67);}
.inpp-bp-amber {border-color:rgba(230,169,89,.67);}  .inpp-bp-amber .bp-arrow{background:rgba(230,169,89,.67);}
.inpp-bp-purple{border-color:rgba(160,152,219,.67);} .inpp-bp-purple .bp-arrow{background:rgba(160,152,219,.67);}
.inpp-bp-cyan  {border-color:rgba(53,155,209,.67);}  .inpp-bp-cyan  .bp-arrow{background:rgba(53,155,209,.67);}
.inpp-mega-head{display:flex; justify-content:space-between; align-items:flex-start; padding:12px 12px 8px;}
.inpp-mega-head b{display:block; font-size:16px; color:#222; font-weight:700;}
.inpp-mega-head .en{font-size:12px; color:#9aa3af;}
.inpp-mega-head img{width:74px; height:84px; object-fit:contain; margin-top:-2px;}
.inpp-mega-feats{display:flex;}
.inpp-mega-feats a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; height:92px; color:#fff; font-size:12px; text-align:center; line-height:1.45; text-decoration:none;}
.inpp-mega-feats .bi{font-size:22px;}
.inpp-c-blue   a:first-child{background:#5f8ad1;} .inpp-c-blue   a:last-child{background:#2f6fd6;}
.inpp-c-tan    a:first-child{background:#cdb389;} .inpp-c-tan    a:last-child{background:#b9966a;}
.inpp-c-purple a:first-child{background:#9c8ed2;} .inpp-c-purple a:last-child{background:#7565bf;}
.inpp-c-hard   a:first-child{background:#6aa6db;} .inpp-c-hard   a:last-child{background:#3f7fb8;}
.inpp-mega-row2{display:flex; align-items:center; justify-content:space-between; width:1024px; max-width:100%; margin:0 auto;} /* 카드와 동일하게 1024px 영역 가운데 정렬 */
.inpp-mega-promo{display:flex; align-items:center; gap:12px;}
.inpp-mega-promo .inpp-pp{width:43px; height:38px; flex:none; display:block;} /* P 포인트 아이콘 이미지(원본 43x38) */
.inpp-mega-promo .sub{display:block; font-size:12px; color:#333; font-weight:700;} /* 본 인쇄 전 필수 코스: 검정 */
.inpp-mega-promo .ttl{font-size:18px; color:#333; font-weight:700;}
.inpp-mega-proofs{display:flex; justify-content:flex-end; gap:20px;} /* 교정출력 3개 우측 정렬, 간격 20px */
.inpp-proof{flex:0 0 auto; display:block; line-height:0; text-decoration:none;} /* 늘어나지 않게 고정 */
.inpp-proof img{width:160px; height:70px; display:block;} /* 원본(160x70) 그대로 */

/* ===== 포스터 메가 드롭다운 ===== */
.inpp-poster-row{display:flex; gap:24px; width:100%; margin:20px 0 0; align-items:stretch; justify-content:flex-start; padding-left:40px; box-sizing:border-box;} /* 콘텐츠 전체폭, 왼쪽 정렬 + 왼쪽 패딩 40px, 카드 위 마진 20px */
.inpp-poster-card{flex:0 0 192px; width:192px; min-height:264px; position:relative; background:#f5f6fb; border-radius:8px; display:flex; flex-direction:column;} /* 카드 192 x 최소 264(내용 많으면 아래로 늘어남) */
.inpp-leaflet .inpp-poster-card{min-height:200px;} /* 전단 카드는 최소 200px */
.inpp-postcard .inpp-poster-card{min-height:200px;} /* 엽서 카드는 최소 200px */
.inpp-package .inpp-poster-card{min-height:200px;} /* 패키지/쇼핑백 카드는 최소 200px */
.inpp-holder .inpp-poster-card{min-height:200px;} /* 홀더 카드는 최소 200px */
.inpp-goodsmenu .inpp-poster-card{min-height:200px;} /* 굿즈 카드는 최소 200px */
/* 액자·달력: 이미지 카드 왼쪽 정렬 + 왼쪽 패딩 40px + 간격 36px */
.inpp-frame .inpp-mega-row,
.inpp-calendar .inpp-mega-row{justify-content:flex-start; width:100%; margin:0; padding-left:40px; gap:36px; box-sizing:border-box;}
.inpp-calendar .inpp-mega-row.inpp-book-row{justify-content:space-between; width:1024px; margin:0 auto; padding-left:0; gap:0;} /* 달력 코딩 카드는 책자와 동일 배치 */
.inpp-photoprint .inpp-poster-row{flex-wrap:wrap; row-gap:40px;} /* 실사출력: 5개씩 2줄, 줄 간격 넓힘 */
.inpp-interstore .inpp-poster-row{flex-wrap:wrap; row-gap:40px;} /* 인터상회: 5개 + 2개 줄바꿈 */
.inpp-interstore .inpp-poster-card{min-height:220px;}
/* 바 색상은 위치(nth-child) 기준 — 샘플북 추가 시안(인터상회-샘플북.png)의 5색 사이클 */
.inpp-interstore .inpp-poster-card:nth-child(1) .inpp-poster-bar{background:#367FD4;} /* 샘플북 */
.inpp-interstore .inpp-poster-card:nth-child(2) .inpp-poster-bar{background:#E6A959;} /* 종이구매 */
.inpp-interstore .inpp-poster-card:nth-child(3) .inpp-poster-bar{background:#A098DB;} /* 배너거치대 */
.inpp-interstore .inpp-poster-card:nth-child(4) .inpp-poster-bar{background:#359BD1;} /* 현수막 부자재 */
.inpp-interstore .inpp-poster-card:nth-child(5) .inpp-poster-bar{background:#20A7B7;} /* 점착용품 */
.inpp-interstore .inpp-poster-card:nth-child(6) .inpp-poster-bar{background:#367FD4;} /* 시트지 부자재 */
.inpp-interstore .inpp-poster-card:nth-child(7) .inpp-poster-bar{background:#E6A959;} /* 액자 부자재 */
.inpp-etc .inpp-poster-card:nth-child(5) .inpp-poster-bar{background:#20A7B7;} /* 별도견적: 기타 인쇄상품 */
.inpp-photoprint .inpp-poster-card{min-height:200px;}
/* 1번째 줄(1~5) 바 색 = 2번째 줄(6~10) 동일하게 */
.inpp-photoprint .inpp-poster-card:nth-child(1) .inpp-poster-bar,
.inpp-photoprint .inpp-poster-card:nth-child(6) .inpp-poster-bar{background:#4263d8;}
.inpp-photoprint .inpp-poster-card:nth-child(2) .inpp-poster-bar,
.inpp-photoprint .inpp-poster-card:nth-child(7) .inpp-poster-bar{background:#d6a35c;}
.inpp-photoprint .inpp-poster-card:nth-child(3) .inpp-poster-bar,
.inpp-photoprint .inpp-poster-card:nth-child(8) .inpp-poster-bar{background:#9182c9;}
.inpp-photoprint .inpp-poster-card:nth-child(4) .inpp-poster-bar,
.inpp-photoprint .inpp-poster-card:nth-child(9) .inpp-poster-bar{background:#5b93cf;}
.inpp-photoprint .inpp-poster-card:nth-child(5) .inpp-poster-bar,
.inpp-photoprint .inpp-poster-card:nth-child(10) .inpp-poster-bar{background:#20A7B7;} /* 실사스티커 */
.inpp-envelope .inpp-poster-row .inpp-poster-card:last-child .inpp-poster-bar{background:#20A7B7;} /* 봉투 달력봉투(마지막 카드) 바 */
.inpp-package .inpp-c-toner  .inpp-poster-bar{background:#9187D6;}
/* 스티커 바 색상 */
.inpp-sticker .inpp-c-indigo .inpp-poster-bar{background:#367FD4;}
.inpp-sticker .inpp-c-toner  .inpp-poster-bar{background:#E6A959;}
.inpp-sticker .inpp-c-offset .inpp-poster-bar{background:#9187D6;} /* 주차 스티커 */
.inpp-poster-thumb{position:absolute; top:-14px; right:16px; width:58px; height:64px; border-radius:6px; background:#dfe4ea; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.12);} /* 박스 위로 튀어나온 썸네일, 내용 중앙 정렬 */
.inpp-poster-thumb:has(img){background:none; box-shadow:none;} /* 이미지가 있으면 placeholder 배경 제거 */
.inpp-poster-thumb img{max-width:100%; max-height:100%; display:block; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35));} /* 투명 PNG도 모양 따라 그림자(box-shadow의 사각 테두리 방지) */
.inpp-poster-head{padding:16px 18px 0;}
/* 카드 제목(인디고인쇄·토너인쇄·옵셋인쇄 …) — .bc-head b 와 같은 16px/500 으로 통일 */
.inpp-poster-head b{font-size:16px; color:#222; font-weight:500;}
.inpp-poster-head::after{content:""; display:block; height:1.5px; background:#dadee7; margin-top:12px;} /* 제목 아래 구분선 (리스트 위) */
.inpp-poster-list{flex:1; list-style:none; margin:0; padding:10px 18px 14px;}
.inpp-poster-list li{margin-bottom:4px;} /* 항목 위아래 간격 축소 */
.inpp-poster-list li a{font-size:13px; color:#555; text-decoration:none;}
.inpp-poster-list li a:hover{color:#1279bd;}
.inpp-poster-bar{color:#fff; font-size:12px; font-weight:400; text-align:center; padding:10px 6px; line-height:1.3; border-radius:0 0 8px 8px; white-space:nowrap; letter-spacing:-0.2px;} /* 1줄 유지 */
.inpp-c-indigo .inpp-poster-bar{background:#267fd4;}
.inpp-c-toner  .inpp-poster-bar{background:#e6a959;}
.inpp-c-offset .inpp-poster-bar{background:#9187d6;}
.inpp-c-sasa   .inpp-poster-bar{background:#20a7b7;}
/* 포스터 하단 프로모 (중앙 박스) */
.inpp-poster-promo{background:#f5f6fb; border-radius:8px; display:flex; align-items:center; justify-content:center; gap:28px; padding:20px;}
.inpp-poster-promo .ic{font-size:30px; color:#3f6fd6; flex:none;}
.inpp-poster-promo img.ic{width:auto; height:auto; display:block; flex:none;} /* 원본 크기 그대로 */
.inpp-poster-promo .txt{text-align:center;}
.inpp-poster-promo .txt .sub{display:block; font-size:15px; color:#555; font-weight:600;} /* 살짝 키우고 굵게 */
.inpp-poster-promo .txt .ttl{font-size:18px; color:#333; font-weight:700;}