/* Shared styles for the guide pages (/import-cat-food-korea and friends).
   index.html deliberately keeps its own inline CSS so it stays a single
   self-contained file; these pages share one sheet so a change lands on all
   of them at once. */

:root{
  --green:#14402F;--green-deep:#0E2E22;--gold:#C19D64;--gold-soft:#E4D3B4;
  --ink:#1B1D1B;--body:#4A4E4A;--muted:#7C817C;--line:#E3E2DD;
  --paper:#FFFFFF;--paper-2:#F7F6F2;--r:4px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:'Inter','Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:15.5px;line-height:1.8;letter-spacing:-0.005em;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;color:var(--ink);line-height:1.35;letter-spacing:-0.022em;font-weight:600}
p{margin:0}ul,ol{margin:0;padding:0;list-style:none}
img{display:block;max-width:100%}
a{color:inherit}

html:not(.kr) .ko{display:none!important}
html.kr .en{display:none!important}
html.kr body{word-break:keep-all;overflow-wrap:break-word}
h1,h2{text-wrap:balance}p,li{text-wrap:pretty}

.wrap{max-width:840px;margin:0 auto;padding-inline:clamp(20px,5vw,32px)}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:12px;height:66px;max-width:840px;margin:0 auto;
  padding-inline:clamp(20px,5vw,32px)}
.hdr img{height:28px;width:auto}
.hdr .home{font-size:13px;font-weight:500;color:var(--body);text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r);padding:7px 13px;transition:.2s;white-space:nowrap}
.hdr .home:hover{border-color:var(--green);color:var(--green)}
.lang{margin-left:auto;display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:none}
.lang button{font:inherit;font-size:11px;font-weight:600;letter-spacing:.08em;padding:6px 12px;
  border:0;background:transparent;color:var(--muted);cursor:pointer;transition:.2s}
.lang button[aria-pressed="true"]{background:var(--green);color:#fff}

/* hero */
.hero{background:var(--paper-2);border-bottom:1px solid var(--line);padding-block:clamp(44px,6vw,68px)}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px}
.hero h1{font-size:clamp(27px,4.2vw,40px)}
.hero .sub{margin-top:20px;font-size:16.5px;max-width:62ch}

/* body */
main{padding-block:clamp(40px,6vw,68px) clamp(52px,7vw,80px)}
section{padding-top:40px}
section + section{border-top:1px solid var(--line)}
section:first-of-type{padding-top:0}
h2{font-size:21px;margin-bottom:16px}
h3{font-size:16.5px;margin-bottom:8px}
section p + p,section p + ul,section ul + p,section p + .tbl,section .tbl + p,
section p + ol,section ol + p,section h3 + p{margin-top:14px}
section > * + h3{margin-top:26px}

ul.dots li{position:relative;padding-left:17px;margin-top:9px;font-size:15px}
ul.dots li::before{content:"";position:absolute;left:0;top:.72em;width:4px;height:4px;
  border-radius:50%;background:var(--gold-soft)}

ol.steps{counter-reset:s}
ol.steps li{counter-increment:s;position:relative;padding-left:42px;margin-top:22px}
ol.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font-size:12px;font-weight:700;color:var(--gold);letter-spacing:.06em}
ol.steps li p{font-size:15px;margin-top:4px}

.tbl{width:100%;border-collapse:collapse;font-size:14.5px;border:1px solid var(--line);margin-top:8px}
.tbl th,.tbl td{padding:12px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.tbl tr:first-child th,.tbl tr:first-child td{border-top:0}
.tbl th{background:var(--paper-2);color:var(--ink);font-weight:600;width:32%}
@media (max-width:560px){
  .tbl,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block}
  .tbl th{width:auto;border-top:1px solid var(--line)}
  .tbl td{border-top:0;padding-top:0}
}

.note{background:var(--paper-2);border-left:3px solid var(--gold);padding:16px 20px;
  font-size:14.5px;margin-top:18px}
.check{display:inline-block;font-size:12px;font-weight:600;background:#FDF3DC;color:#7A5A16;
  border:1px solid #EBD9AC;border-radius:3px;padding:2px 8px}

/* cta */
.cta{margin-top:44px;background:var(--green);color:rgba(255,255,255,.86);
  border-radius:var(--r);padding:clamp(26px,3.4vw,38px)}
.cta h2{color:#fff;font-size:20px;margin-bottom:12px}
.cta .btn{display:inline-block;margin-top:20px;background:var(--gold);color:#20180C;
  text-decoration:none;font-size:14px;font-weight:600;padding:13px 26px;border-radius:var(--r);transition:.2s}
.cta .btn:hover{background:#D2B07A}

/* related links */
.more{margin-top:40px;padding-top:30px;border-top:1px solid var(--line)}
.more h2{font-size:15px;margin-bottom:16px}
.more ul{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.more a{display:block;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  text-decoration:none;transition:.2s}
.more a:hover{border-color:var(--gold)}
.more b{display:block;color:var(--ink);font-size:15px;font-weight:600;margin-bottom:4px}
.more span{font-size:13.5px;color:var(--muted)}
@media (max-width:640px){.more ul{grid-template-columns:1fr}}

/* footer */
.ftr{background:var(--green-deep);color:rgba(255,255,255,.6);padding-block:44px 30px;font-size:13.5px}
.ftr .biz{line-height:2}
.ftr b{color:rgba(255,255,255,.85);font-weight:500}
.ftr a{color:rgba(255,255,255,.6)}
.ftr a:hover{color:var(--gold)}
.ftr-btm{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.13);
  font-size:12.5px;color:rgba(255,255,255,.42)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}

/* ---------------------------------------------------------------
   Print — a buyer prints this and takes it into a meeting.
   Drop the chrome, keep the substance, and put URLs on paper where
   a link cannot be clicked.
   --------------------------------------------------------------- */
@media print{
  .hdr,.cta,.more,.lang{display:none!important}
  html,body{background:#fff!important;color:#000!important;font-size:10.5pt;line-height:1.55}
  .wrap{max-width:none;padding-inline:0}
  .hero{background:none!important;border-bottom:1pt solid #000;padding-block:0 12pt}
  .hero h1{font-size:20pt}
  .hero .sub{font-size:11pt;max-width:none}
  .eyebrow{color:#000!important;font-size:8pt}
  main{padding-block:12pt 0}
  section{padding-top:14pt;break-inside:avoid}
  section + section{border-top:0.5pt solid #999}
  h2{font-size:13pt;break-after:avoid}
  h3{font-size:11pt;break-after:avoid}
  ol.steps li,ul.dots li,.tbl tr{break-inside:avoid}
  .tbl{border-color:#999}
  .tbl th,.tbl td{border-top-color:#999;padding:5pt 7pt}
  .tbl th{background:#f0f0f0!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .note{background:none!important;border-left:2pt solid #000;padding:6pt 10pt}
  .check{border:0.5pt solid #000;background:none!important;color:#000!important}
  /* A printed page cannot be clicked, so spell the address out. */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#555;word-break:break-all}
  a[href^="mailto:"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#555}
  a[href^="/"]::after{content:" (fillinjhc.com" attr(href) ")";font-size:8.5pt;color:#555}
  a[href^="#"]::after,a[href^="tel:"]::after{content:""}
  .ftr{background:none!important;color:#000!important;border-top:1pt solid #000;padding-block:10pt 0}
  .ftr b,.ftr a{color:#000!important}
  .ftr a::after{content:""}
  @page{margin:16mm 14mm}
}