:root{
  --bg:#F5F2EB;
  --bg-elev:#EDE9DF;
  --bg-soft:#FAF8F2;
  --bg-ink:#1A1814;
  --text:#1A1814;
  --text-2:#4A4640;
  --text-3:rgba(74,70,64,0.52);
  --accent:#85D5FF;
  --rule:#D8D2C4;
  --line:rgba(26,24,20,0.10);
  --line-strong:rgba(26,24,20,0.20);
  --ease:cubic-bezier(0.22,1,0.36,1);
  --f-display-en:'Fraunces','Palatino Linotype','Book Antiqua',serif;
  --f-display-kr:'Noto Serif KR','Fraunces','Batang',serif;
  --f-body-en:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Helvetica Neue',Arial,sans-serif;
  --f-body-kr:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
}

*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}

body{
  min-width:320px;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body-kr);
  font-size:16px;
  line-height:1.78;
  word-break:keep-all;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;}
em{font-style:italic;color:var(--text);}
strong{color:var(--text);font-weight:500;}
dfn{font-style:normal;}

.skip{
  position:absolute;
  left:-999px;
  top:12px;
  z-index:999;
  background:var(--bg-ink);
  color:var(--bg);
  padding:8px 12px;
}

.skip:focus{left:12px;}

main{
  position:relative;
  z-index:1;
  border-top:1px solid transparent;
}

.container{
  width:min(100%, 960px);
  margin:0 auto;
  padding:152px 40px 92px;
}

.pre,
.section-label{
  font-family:var(--f-body-en);
  font-size:11px;
  line-height:1.4;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
  font-weight:400;
}

.pre{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:28px;
}

.pre::before,
.section-label::before{content:none;display:none;}

h1{
  max-width:860px;
  font-family:var(--f-display-kr);
  font-weight:300;
  font-size:clamp(38px,6vw,68px);
  line-height:1.08;
  letter-spacing:-.04em;
  color:var(--text);
  margin-bottom:22px;
}

h1 em{font-style:italic;color:var(--text);font-weight:400;}

.lede-en{
  max-width:720px;
  font-family:var(--f-display-en);
  font-style:italic;
  font-weight:300;
  font-size:clamp(16px,1.35vw,19px);
  color:var(--text-3);
  line-height:1.52;
  letter-spacing:0;
  margin-bottom:46px;
}

.tldr{
  margin:0 0 72px;
  padding:30px 0 34px;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line);
  background:transparent;
}

.tldr .label{
  font-family:var(--f-body-en);
  font-size:10px;
  color:var(--text-3);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:16px;
}

.tldr p{
  max-width:820px;
  font-family:var(--f-display-kr);
  font-size:clamp(18px,1.7vw,23px);
  line-height:1.62;
  letter-spacing:-.018em;
  color:var(--text);
  font-weight:300;
}

.tldr p strong{color:var(--text);font-weight:500;}

section{
  margin-bottom:68px;
  padding-top:50px;
  border-top:1px solid var(--line);
}

.section-label{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

h2{
  max-width:780px;
  font-family:var(--f-display-kr);
  font-weight:300;
  font-size:clamp(25px,3vw,38px);
  line-height:1.28;
  letter-spacing:-.025em;
  color:var(--text);
  margin-bottom:24px;
}

h2 em{font-style:italic;color:var(--text);font-weight:400;}

.body p{
  max-width:760px;
  color:var(--text-2);
  font-size:16px;
  line-height:1.92;
  margin-bottom:17px;
}

.body p strong{color:var(--text);font-weight:500;}

.body p a{
  color:var(--text-2);
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  transition:border-color .35s ease,color .35s ease;
}

.body p a:hover{
  color:var(--text);
  border-color:var(--text);
}

.compare-table{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--line);
  margin-top:10px;
  background:transparent;
}

.compare-cell{
  background:transparent;
  padding:26px 28px;
}

.compare-cell + .compare-cell{border-left:1px solid var(--line);}

.compare-cell .head{
  font-family:var(--f-display-en);
  font-style:italic;
  color:var(--text-3);
  font-size:13px;
  margin-bottom:14px;
  letter-spacing:.04em;
}

.compare-cell h4{
  font-family:var(--f-display-kr);
  font-weight:400;
  font-size:18px;
  line-height:1.45;
  color:var(--text);
  margin-bottom:12px;
}

.compare-cell p{
  color:var(--text-2);
  font-size:14.5px;
  line-height:1.82;
  margin-bottom:0;
}

.compare-cell ul{list-style:none;margin-top:8px;}

.compare-cell li{
  position:relative;
  padding-left:14px;
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.85;
}

.compare-cell li::before{
  content:'.';
  position:absolute;
  left:0;
  top:-1px;
  color:var(--text-3);
}

.case-block{
  max-width:820px;
  margin-top:12px;
  padding:28px 30px;
  border:1px solid var(--line);
  background:var(--bg-elev);
}

.case-block .case-label{
  font-family:var(--f-body-en);
  color:var(--text-3);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:14px;
  font-weight:400;
}

.case-block h3{
  font-family:var(--f-display-kr);
  font-size:clamp(18px,1.5vw,22px);
  font-weight:300;
  line-height:1.48;
  color:var(--text);
  margin-bottom:12px;
}

.case-block p{
  color:var(--text-2);
  font-size:14px;
  line-height:1.86;
  margin-bottom:16px;
}

.case-block .case-links{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}

.case-block .case-links a{
  font-family:var(--f-body-en);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-2);
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:5px;
  transition:color .35s ease,border-color .35s ease;
}

.case-block .case-links a:hover{
  color:var(--text);
  border-color:var(--text);
}

.term-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin-top:12px;
}

.term-card{
  min-height:100%;
  background:var(--bg-elev);
  border:1px solid var(--line);
  padding:26px 28px 24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}

.term-card:hover{
  background:transparent;
  border-color:var(--line-strong);
}

.term-card .term-en{
  font-family:var(--f-display-en);
  font-style:italic;
  font-size:12px;
  color:var(--text-3);
  letter-spacing:.06em;
}

.term-card h3{
  font-family:var(--f-display-kr);
  font-weight:400;
  font-size:clamp(18px,1.8vw,22px);
  line-height:1.3;
  letter-spacing:-.02em;
  color:var(--text);
}

.term-card h3 a{text-decoration:none;color:inherit;}
.term-card h3 a:hover{color:var(--text);}

.term-card p{
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.82;
  flex:1;
}

.term-card .term-link{
  font-family:var(--f-body-en);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-3);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:color .35s ease;
}

.term-card .term-link:hover{color:var(--text);}

.related-defs{
  margin-top:76px;
  padding-top:28px;
  border-top:1px solid var(--line-strong);
}

.related-defs .label{
  font-family:var(--f-body-kr);
  font-style:normal;
  font-size:14px;
  color:var(--text);
  letter-spacing:-.01em;
  margin-bottom:14px;
  font-weight:500;
}

.related-defs ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
}

.related-defs a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--text-2);
  text-decoration:none;
  padding:4px 0 5px;
  border-bottom:1px solid transparent;
  background:transparent;
  font-family:var(--f-body-kr);
  font-size:13px;
  line-height:1.45;
  transition:border-color .35s ease,color .35s ease;
}

.related-defs a::after{
  content:'→';
  font-family:var(--f-body-en);
  font-size:11px;
  color:var(--text-3);
  transform:translateY(-1px);
  transition:transform .35s var(--ease),color .35s ease;
}

.related-defs a:hover{
  color:var(--text);
  border-color:var(--line-strong);
}

.related-defs a:hover::after{
  color:var(--text);
  transform:translate(2px,-1px);
}

.meta-foot{
  margin-top:40px;
  padding-top:24px;
  border-top:1px dashed var(--line);
  font-family:var(--f-body-en);
  font-size:12px;
  color:var(--text-3);
  line-height:1.7;
}

.meta-foot strong{color:var(--text-2);font-weight:400;}
.meta-foot .last-updated{display:block;margin-bottom:6px;}

.faq-list{display:flex;flex-direction:column;gap:0;}

.faq-item{
  padding:24px 0;
  border-bottom:1px solid var(--line);
}

.faq-item:first-child{border-top:1px solid var(--line);}

.faq-item h3{
  font-family:var(--f-display-kr);
  font-weight:400;
  font-size:clamp(16px,1.4vw,19px);
  line-height:1.5;
  letter-spacing:-.018em;
  color:var(--text);
  margin-bottom:10px;
}

.faq-item p{
  color:var(--text-2);
  font-size:15px;
  line-height:1.88;
  margin-bottom:0;
}

.footer-cta{
  display:inline-flex;
  align-items:center;
  padding:10px 20px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  color:var(--text);
  text-decoration:none;
  font-size:11px;
  letter-spacing:.08em;
  transition:border-color .35s ease,color .35s ease,background .35s ease;
}

.footer-cta:hover{
  border-color:var(--text);
  color:var(--text);
  background:transparent;
}

@media (max-width:720px){
  .container{padding:126px 22px 72px;}
  .pre{margin-bottom:22px;}
  h1{font-size:clamp(34px,12vw,50px);}
  .lede-en{margin-bottom:36px;}
  .tldr{padding:24px 0 28px;margin-bottom:58px;}
  section{padding-top:40px;margin-bottom:56px;}
  .compare-table{grid-template-columns:1fr;}
  .compare-cell{padding:22px 22px;}
  .compare-cell + .compare-cell{border-left:0;border-top:1px solid var(--line);}
  .case-block{padding:22px 22px;}
  .term-grid{grid-template-columns:1fr;}
  .related-defs{margin-top:60px;}
  .related-defs ul{display:grid;grid-template-columns:1fr;gap:6px;}
  .related-defs a{justify-content:space-between;padding:8px 0;}
}
