/* ===========================================================
   KOREACOSPACK — Packaging catalogue (사이트 내장용)
   - 본 사이트 헤더/푸터와 충돌하지 않도록 모든 클래스에 pk- 접두어
   - 다크(네이비) 테마 고정, 제목 서체는 본 사이트와 동일(Noto Serif KR)
   =========================================================== */
#pkgApp{
  --navy:#000F31;
  --accent:#d81e79;
  --accent-soft:rgba(216,30,121,.13);
  --bg:transparent;
  --bg-2:#000f31;
  --ink:#eef1f8;
  --ink-soft:rgba(233,237,247,.66);
  --ink-faint:rgba(233,237,247,.4);
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.07);
  --card:rgba(255,255,255,.03);
  --tile-fallback:#06080f;
  --font-serif:'Noto Serif KR','Cormorant Garamond',Georgia,serif;
  --font-body:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',system-ui,sans-serif;
  --maxw:1440px;
  --pad:30px;
  --photo-min:96px;

  position:relative;color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
#pkgApp *{box-sizing:border-box}
#pkgApp img{display:block;max-width:100%}
#pkgApp a{color:inherit;text-decoration:none}
#pkgApp button{font-family:inherit}
#pkgApp .pk-wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
#pkgApp .pk-eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--ink-faint)}
#pkgApp .pk-serif{font-family:var(--font-serif)}
#pkgApp .pk-tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* =====================  HERO  ===================== */
#pkgApp .pk-hero{position:relative;color:#fff;overflow:hidden}
#pkgApp .pk-hero::before{
  content:"PACKAGING";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--font-body);font-weight:800;font-size:clamp(120px,20vw,320px);
  color:rgba(255,255,255,.03);white-space:nowrap;letter-spacing:.02em;pointer-events:none;z-index:0;
}
#pkgApp .pk-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);
  align-items:center;padding-block:clamp(50px,7vw,110px) clamp(60px,8vw,120px)}
#pkgApp .pk-hero-eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;margin-bottom:30px}
#pkgApp .pk-hero h1{font-family:var(--font-serif);font-weight:300;letter-spacing:-.01em;
  font-size:clamp(48px,6.4vw,92px);line-height:1.1;margin:0 0 12px;color:#fff}
#pkgApp .pk-hero h1 .pk-kr{display:block;font-family:var(--font-body);font-size:.3em;letter-spacing:.02em;color:#979ca3;margin-top:22px;font-weight:600}
#pkgApp .pk-hero-lead{max-width:48ch;color:rgba(255,255,255,.72);font-size:17px;line-height:1.85;font-weight:300;margin:28px 0 0}
#pkgApp .pk-hero-stats{display:flex;gap:42px;margin-top:44px;flex-wrap:wrap}
#pkgApp .pk-hero-stats .pk-st b{font-family:var(--font-serif);font-size:38px;font-weight:400;display:block;line-height:1;color:#fff}
#pkgApp .pk-hero-stats .pk-st span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:10px;display:block}
#pkgApp .pk-hero-fig{position:relative;aspect-ratio:4/5;background:#02061a;overflow:hidden;border:1px solid rgba(255,255,255,.1);margin:0}
#pkgApp .pk-hero-fig img{width:100%;height:100%;object-fit:cover;opacity:.96}
#pkgApp .pk-hero-fig .pk-tag{position:absolute;left:0;bottom:0;background:var(--accent);color:#fff;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;padding:9px 16px;font-weight:600}
@media(max-width:820px){#pkgApp .pk-hero-in{grid-template-columns:1fr;gap:38px}#pkgApp .pk-hero-fig{aspect-ratio:16/10}}

/* =====================  CATEGORY TABS (사이트 헤더 100px 아래에 고정) ===================== */
#pkgApp .pk-tabs{position:sticky;top:100px;z-index:9;background:rgba(0,15,49,.92);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#pkgApp .pk-tabs-in{display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none}
#pkgApp .pk-tabs-in::-webkit-scrollbar{display:none}
#pkgApp .pk-tab{flex:0 0 auto;display:flex;align-items:center;gap:11px;padding:19px 26px 17px;border:none;background:none;
  cursor:pointer;color:var(--ink-soft);font-size:13px;font-weight:600;letter-spacing:.04em;white-space:nowrap;
  border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
#pkgApp .pk-tab .pk-tno{font-family:var(--font-serif);font-size:13px;color:var(--ink-faint)}
#pkgApp .pk-tab .pk-ten{text-transform:uppercase;letter-spacing:.13em;font-size:12px}
#pkgApp .pk-tab:hover{color:var(--ink)}
#pkgApp .pk-tab.active{color:#fff;border-bottom-color:var(--accent)}
#pkgApp .pk-tab.active .pk-tno{color:var(--accent)}
#pkgApp .pk-tabs-meta{margin-left:auto;display:flex;align-items:center;padding-right:4px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
@media(max-width:920px){#pkgApp .pk-tabs-meta{display:none}#pkgApp .pk-tab{padding:15px 18px 13px}}

/* =====================  SECTION  ===================== */
#pkgApp .pk-sec{padding-block:clamp(58px,8vw,108px);border-top:1px solid var(--line-soft)}
#pkgApp .pk-sec:first-of-type{border-top:none}
#pkgApp .pk-sec-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,54px);align-items:start;margin-bottom:clamp(40px,5vw,64px)}
#pkgApp .pk-sec-no{font-family:var(--font-serif);font-size:clamp(78px,11vw,148px);line-height:.8;font-weight:500;
  color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.16);letter-spacing:0;user-select:none}
#pkgApp .pk-sec-titles{padding-top:8px}
#pkgApp .pk-sec-titles .pk-en{font-family:var(--font-serif);font-size:clamp(34px,4.4vw,58px);font-weight:300;line-height:1.1;margin:0;color:#fff}
#pkgApp .pk-sec-titles .pk-kr{font-size:18px;letter-spacing:.02em;color:#979ca3;margin-top:14px;font-weight:600}
#pkgApp .pk-sec-blurb{max-width:62ch;color:var(--ink-soft);font-size:17px;line-height:1.85;font-weight:300;margin:22px 0 0}

/* ---- series cards (photos + spec) ---- */
#pkgApp .pk-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:clamp(22px,2.6vw,40px);align-items:start}
#pkgApp .pk-gcard{border:1px solid var(--line);background:var(--card);display:flex;flex-direction:column}
#pkgApp .pk-gcard-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:18px 22px 14px;border-bottom:1px solid var(--line)}
#pkgApp .pk-gphotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--photo-min),1fr));gap:7px;
  padding:18px;border-bottom:1px solid var(--line)}
#pkgApp .pk-tile{position:relative;aspect-ratio:3/4;background:var(--tile-fallback);overflow:hidden;
  border:1px solid var(--line-soft);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;cursor:pointer;padding:0}
#pkgApp .pk-tile img{width:100%;height:100%;object-fit:contain;padding:9%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
#pkgApp .pk-tile::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);pointer-events:none}
#pkgApp .pk-tile:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(0,0,0,.8),0 0 0 1px var(--line);z-index:2}
#pkgApp .pk-tile:hover img{transform:scale(1.07)}
#pkgApp .pk-tile .pk-tick{position:absolute;top:0;left:0;width:0;height:0;border-style:solid;border-width:0 0 18px 18px;
  border-color:transparent transparent transparent var(--accent);opacity:0;transition:opacity .3s}
#pkgApp .pk-tile:hover .pk-tick{opacity:1}

/* ---- spec table ---- */
#pkgApp .pk-gname{font-family:var(--font-serif);font-size:22px;font-weight:500;letter-spacing:.01em;color:#fff}
#pkgApp .pk-gname .pk-gpart{font-family:var(--font-body);font-size:11px;font-weight:600;color:var(--ink-faint);
  letter-spacing:.06em;margin-left:9px;vertical-align:middle}
#pkgApp .pk-unit{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  border:1px solid var(--line);padding:4px 9px;border-radius:999px;white-space:nowrap}
#pkgApp table.pk-spec{width:100%;border-collapse:collapse;font-size:13.5px}
#pkgApp table.pk-spec thead th{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:600;text-align:right;padding:11px 22px 9px;background:none;border:0}
#pkgApp table.pk-spec thead th:first-child{text-align:left}
#pkgApp table.pk-spec tbody td{padding:11px 22px;border:0;border-top:1px solid var(--line-soft);text-align:right;color:var(--ink-soft)}
#pkgApp table.pk-spec tbody td:first-child{text-align:left;color:var(--ink);font-weight:600;letter-spacing:.01em;font-size:13px}
#pkgApp table.pk-spec tbody tr{transition:background .15s}
#pkgApp table.pk-spec tbody tr:hover{background:var(--accent-soft)}
#pkgApp table.pk-spec tbody tr:hover td:first-child{color:#ff6fb0}
#pkgApp .pk-dimcol{color:var(--ink-faint)!important;font-size:11px}
#pkgApp .pk-capv{color:var(--ink)!important;font-weight:600}
#pkgApp .pk-legend{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
@media(max-width:520px){
  #pkgApp .pk-groups{grid-template-columns:1fr}
  #pkgApp table.pk-spec thead th,#pkgApp table.pk-spec tbody td{padding-inline:12px}
  #pkgApp .pk-gcard-head{padding-inline:16px}
  #pkgApp{--pad:18px}
}

/* ---- 문의 유도 ---- */
#pkgApp .pk-cta{text-align:center;padding:clamp(50px,7vw,96px) 0 clamp(30px,5vw,60px);border-top:1px solid var(--line-soft)}
#pkgApp .pk-cta h3{font-family:var(--font-serif);font-weight:300;font-size:clamp(26px,3.2vw,42px);line-height:1.3;color:#fff;margin:0 0 14px}
#pkgApp .pk-cta p{color:var(--ink-soft);font-size:17px;font-weight:300;margin:0 0 30px}
#pkgApp .pk-cta a{display:inline-block;border:1px solid rgba(255,255,255,.4);color:#fff;padding:16px 46px;font-size:15px;letter-spacing:.08em;transition:all .25s}
#pkgApp .pk-cta a:hover{background:#fff;color:#000F31;border-color:#fff}

/* =====================  LIGHTBOX (body에 붙음) ===================== */
.pk-lb{position:fixed;inset:0;z-index:9999;background:rgba(0,6,20,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:5vw}
.pk-lb.open{display:flex}
.pk-lb img{max-width:min(560px,86vw);max-height:84vh;object-fit:contain;background:#06080f;border:1px solid rgba(255,255,255,.12)}
.pk-lb .pk-lb-close{position:absolute;top:26px;right:30px;color:#fff;font-size:34px;cursor:pointer;line-height:1;
  background:none;border:none;opacity:.7;transition:opacity .2s}
.pk-lb .pk-lb-close:hover{opacity:1}