body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.background {
    background-color: #546958;
    padding-top: 40px; /* 충분히 여백 확보 */
    padding-bottom: 25px;
}

.container {
  position: relative; /* 🔑 이거 있어야 내부에서 절대 위치 가능 */
  max-width: 850px;
  margin: auto;
  background-color: white;
  padding: 40px;
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.profile-img {
    width: 180px;
    border-radius: 100%;
    display: block;
    margin: auto;
}

.responsive-name {
    white-space: nowrap;
}
  
.korean-name {
    display: inline;
    font-size: 0.8em;
}

h1, h2 {
    text-align: center;
    color: #2d5a3e;
}

h2 {
    margin-top: 60px;
}

p {
    line-height: 1.6;
}

.links {
    text-align: center;
    margin-top: 10px;
}

.links a {
    color: #2d5a3e;
    text-decoration: none;
    font-weight: bold;
    margin: 0 6px;
    white-space: nowrap;
}

.divider {
    margin: 0 4px;
    color: #888;
}

.links a:hover {
    text-decoration: underline;
}


.pub-header {
    text-align: left;
    color: #2d5a3e;
    margin-top: 0; /* remove any gap above */
}


.pub-category {
    font-size: 1.2em;
    margin-top: 40px;
    font-weight: bold;
    color: #214c33;
}

.pub-list {
    list-style: none;
    padding-left: 0;
}

.pub-list li {
    margin-bottom: 25px;
    line-height: 1.6;
}

a {
    color: #546958; /* greenish that contrasts well with #546958 background */
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
}

.new-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f1de6e, #2c923d);
    color: white;
    font-size: 0.75em;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(42, 143, 64, 0.6);
    animation: shimmer 1.8s infinite;
    white-space: nowrap;
}

@keyframes shimmer {
    0% {
        box-shadow: 0 0 8px rgba(241, 222, 110, 0.5);  /* light gold */
    }
    50% {
        box-shadow: 0 0 12px rgba(44, 146, 61, 1);     /* forest green */
    }
    100% {
        box-shadow: 0 0 8px rgba(255, 241, 150, 0.6);  /* pale yellow */
    }
}

.fancy-line {
    border: 0;
    height: 2px;
    background: linear-gradient(to right, #2d5a3e, #91c191, #2d5a3e);
    margin: 30px 0 10px 0; /* top | right | bottom | left */
    opacity: 0.7;
    border-radius: 2px;
}

.subtle-line {
    border: none;
    height: 1px;
    background-color: #d6e4d1; /* soft green-gray */
    opacity: 0.4;
    margin: 30px 0;
}

/* 🌙 토글 버튼 */
.theme-toggle {
    position: absolute;
    top: 20px;     /* container 내부 위쪽 여백 */
    right: 20px;   /* container 내부 오른쪽 여백 */
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    z-index: 10;
  }
  
.theme-toggle:hover {
    transform: scale(1.1);
}

.dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0;
}

.dark-mode .background {
    background-color: #121212;
}

.dark-mode .container {
    background-color: #222;
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

.dark-mode h1,
.dark-mode h2,
.dark-mode .pub-category {
    color: #a4f0c1;
}

.dark-mode .links a {
    color: #80d8ff;
}

.dark-mode .links a:hover {
    color: #ffee58;
}

.dark-mode .new-badge {
    background: linear-gradient(135deg, #ffeb3b, #8bc34a);
    color: #000;
    box-shadow: 0 0 8px rgba(255, 235, 59, 0.6);
}

.dark-mode hr.fancy-line {
    background: linear-gradient(to right, #444, #888, #444);
}

.dark-mode hr.subtle-line {
    background-color: #555;
}

.social-icons i {
    font-size: 1.0em; /* 기본 데스크탑용 */
}

.footer {
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
    color: #fdfdfd;
}

@media (max-width: 768px) {
    .social-icons i {
        font-size: 1.2em;
    }

    .theme-toggle {
        font-size: 1.5em;
        top: 15px;
        right: 15px;
    }
    .links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .links a {
        margin: 4px 6px;
    }

    .responsive-name {
        white-space: normal;
    }
    
    .korean-name {
        display: block;
        margin-top: 0.2em;
        font-size: 0.8em; /* optional: 조금 작게 */
    }
}