/* 마크다운 */
.content { padding: 22px;   overflow-y: auto;   overflow-x: hidden;  padding-bottom: 60px;}
.card { background: rgba(255, 255, 255, 0.02);   padding: 18px;   border-radius: 12px;   max-width: 100%}

.md h1 { font-size: 28px;   margin: 12px 0}
.md h2 { font-size: 23px;   margin: 10px 0}
.md p { line-height: 1.6;   color: var(--text-color)}

code { background: rgba(135, 131, 120, 0.15);   color: rgba(255, 131, 120, 0.95);   padding: 0.2em 0.4em;   border-radius: 6px;   font-family: 'D2Coding';   font-size: 0.9em;}
pre { background: rgba(135, 131, 120, 0.15);   padding: 1em;   border-radius: 8px;   overflow-x: auto;   font-family: 'D2Coding';   font-size: 1em;   color: inherit;}
pre code { background: none;   padding: 0;   border-radius: 0;   display: block;   white-space: pre;}

/* 펼치기 접기 */
details { background: rgba(79, 70, 229, 0.05);   border-left: 4px solid var(--accent);   border-radius: 6px;   padding: 8px 12px;   line-height: 1.6;   margin: 12px 0;   transition: background 0.3s;}
details summary { color: white;   padding-left: 3px;   cursor: pointer;   font-weight: bold;}
details summary:hover span { color: var(--bg);   background-color: rgba(54, 254, 173, 0.85);   padding: 0 2px;   border-radius: 2px;   transition: background-color 0.1s ease;}
details p { color: #cfe6ff;   margin: 6px 0 0 0;}

/* 인용 */
.md blockquote { position: relative;   margin: 0 0 1em 0;    padding: 0.4em 0.5em 0.4em 2.5em;   border-left: 4px solid var(--accent);    background: var(--card);    border-radius: 10px;    color: var(--text-color);    line-height: 1.6;}
.md blockquote::before { content: "";   position: absolute;   left: .45em;   top: 50%;   transform: translateY(-50%);   width: 1.5em;   height: 1.5em;   background-image: url('/assets/img/light.png');   background-size: contain;   background-repeat: no-repeat;}

/* 표 */
.md table { width: 80%;  max-width: 800px;  border-collapse: collapse;  margin: 1em 0;  background: var(--table-bg);  border-radius: 12px;  overflow: hidden;}

.md th,
.md td { padding: 10px 14px;   border-bottom: 1px solid var(--border-color);   font-family: var(--font-family);   font-size: 0.95em;   color: var(--text-color);   text-align: left;}

.md th { background: var(--th-bg);   font-weight: bold;}
.md tr:hover td { background: var(--hover-bg);}
.md tr:last-child td { border-bottom: none;}

@media (max-width: 400px) {
   .md table {
      font-size: 0.85em;
   }

   .md th,
   .md td {
      padding: 8px 10px;
   }
}

/* 임베드 */
.embed-card {
   display: flex;
   border: 1px solid #ccc;
   border-radius: 8px;
   overflow: hidden;
   max-width: 500px;
   margin: 8px 0;
   text-decoration: none;
   color: inherit;
   background-color: #1e1e1e;
   transition: transform 0.2s, box-shadow 0.2s;
}

.embed-card:hover {   border: 1px solid aqua;   transform: translateY(-2px);   box-shadow: 0 4px 12px rgba(0,0,0,0.3);}

.embed-card a {   display: flex;   text-decoration: none;   vertical-align: middle;   color: inherit;   width: 100%;}

.embed-image img {   align-items: center;   width: 96px;   height: 96px;   object-fit: cover;}

.embed-content {   padding: 10px;   display: flex;   flex-direction: column;   justify-content: space-between;}

.embed-title {   font-size: 1rem;   font-weight: bold;   margin: 0 0 4px 0;   color: #cedfff;}
.embed-description {   font-size: 0.85rem;   color: #cccccc;   margin: 0 0 6px 0;}
.embed-site {   font-size: 0.75rem;   color: #888888;    text-decoration: underline;}