/* ================================
   DailyKorean - K-series common CSS
   (k-pop / k-food / k-beauty / ...)
   ================================ */

:root{
  --dk-text:#444;
  --dk-muted:#6b7280;
  --dk-border:#ccc;
  --dk-bg:#ffffff;
  --dk-card:rgba(17,24,39,.03);
  --dk-radius:10px;
  --dk-shadow:0 8px 24px rgba(0,0,0,.08);
  --dk-accent:#2563eb;
}

/* top underline title (you use .underline) */
.k-underline{
  margin: 10px 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(17,24,39,.10);
}
.k-underline h1{
  margin:0;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.02em;
}

/* section wrapper (you use .paragraph) */
.k-paragraph{
  margin-bottom:30px;
  padding: 20px;
  border: 1px solid var(--dk-border);
  border-radius: var(--dk-radius);
  background: var(--dk-bg);
  box-shadow: var(--dk-shadow);
}

.k-paragraph h3{
  margin: 0 0 10px;
  font-size: 18px;
}
.k-paragraph p{
  margin: 10px 0;
  color: var(--dk-text);
  line-height: 1.75;
}

/* muted/callout */
.dk-muted{ color: var(--dk-muted); }
.dk-callout{
  border: 1px solid rgba(37,99,235,.25);
  background: rgba(37,99,235,.06);
  border-radius: var(--dk-radius);
  padding: 12px 14px;
}

/* list */
.dk-list{
  margin: 10px 0 0;
  padding-left: 18px;
  line-height: 1.35;
}
.dk-list li{ margin: 4px 0; }

/* links area */
.dk-links{
  display:flex;
  flex-direction: row;
  gap:10px;
  flex-wrap:wrap;
}

/* plain link */
.dk-link{
  color: var(--dk-accent);
  text-decoration: none;
}
.dk-link:hover{ text-decoration: underline; }

/* button link (recommended) */
.dk-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--dk-border);
  background: #fff;
  background: linear-gradient(rgb(255, 255, 255), rgb(235, 235, 235));
  color: var(--dk-text);
  text-decoration:none;
  font-size: 14px;
  box-shadow: 3px 3px 3px rgba(23, 139, 112, 0.1);
}
.dk-btn:hover{
  border-color: rgba(27, 108, 77, 0.35);
  box-shadow: none;
  background: none;
}

/* table (you have <table> with no class) */
.k-paragraph table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  border: 1px solid var(--dk-border);
  border-radius: 12px;
  overflow: hidden;
  background:#fff;
}
.k-paragraph th,
.k-paragraph td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--dk-border);
  text-align: left;
  vertical-align: top;
  font-size: 14px;
}
.k-paragraph th{
  background: rgba(17,24,39,.04);
  font-weight: 700;
}
.k-paragraph tr:last-child td{ border-bottom: none; }

/* details/summary (FAQ) */
.k-paragraph details{
  border: 1px solid var(--dk-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(17,24,39,.02);
  margin-top: 10px;
}
.k-paragraph summary{
  font-weight: 700;
}
.k-paragraph li{
  color:#444;
  margin-left:2rem;
  font-weight: 700;
}
.k-paragraph p{
  color:#444;
  line-height:1.3;
  font-weight: 400;
}