/*===== Reset & Basic Settings =====*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    background-color: #f4f7f6;
    font-weight: 400;
    word-break: keep-all;
}
a {
    text-decoration: none;
    color: #007acc;
    transition: color 0.2s ease;
}
a:hover {
    text-decoration: underline;
    color: #0056b3;
}
ul, ol {
    list-style: none;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 20px 0;
}
.hide {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/*===== Layout =====*/
#wrap {
    max-width: 1140px;
    margin: 20px auto;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Header */
#header {
    padding: 40px 30px;
    border-bottom: 1px solid #e0e0e0;
    text-align: center;
    position: relative; /* For mobile menu button positioning */
}
#header h1 {
    margin-bottom: 5px;
}
#header h1 a {
    font-size: 2.5em;
    color: #222;
    font-weight: 700;
    text-decoration: none;
    font-family: 'Noto Sans KR', sans-serif;
}
#header .description {
    color: #666;
    font-size: 1em;
}

/* Container (Sidebar + Content Wrapper) */
#container {
    display: flex;
    flex-direction: row;
    padding: 30px;
}

/* Sidebar (Left) */
#sidebar {
    width: 250px;
    margin-right: 40px;
    flex-shrink: 0;
}

/* Content Area (Right) */
#content {
    flex-grow: 1;
    min-width: 0;
}

/*===== Sidebar Modules Styling =====*/
#sidebar .module {
    margin-bottom: 30px;
}
#sidebar .module h2 {
    font-size: 1.3em;
    color: #444;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #eee;
    font-weight: 700;
    font-family: 'Noto Sans KR', sans-serif;
}
#sidebar .module ul {
    list-style: none;
    padding-left: 0;
}
#sidebar .module ul li {
    margin-bottom: 8px;
    font-size: 0.95em;
}
#sidebar .module ul li a {
    color: #555;
}
#sidebar .module ul li a:hover {
    color: #007acc;
}

/* Sidebar Search Box Styling */
#sidebar .search-box {
    margin-bottom: 30px;
}
#sidebar .search-box form { /* Tistory Search Form */
    display: flex; /* Input and button side-by-side */
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden; /* Prevent button overflow on rounding */
}
#sidebar .search-box input[type="text"] { /* Search Input */
    flex-grow: 1; /* Take available space */
    padding: 10px 12px;
    border: none; /* Remove default border */
    font-size: 0.95em;
    font-family: 'Noto Sans KR', sans-serif;
    outline: none; /* Remove focus outline */
}
#sidebar .search-box input[type="submit"] { /* Search Button */
    background-color: #007acc;
    color: white;
    border: none;
    padding: 0 15px; /* Adjust padding */
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 700;
    transition: background-color 0.2s ease;
}
#sidebar .search-box input[type="submit"]:hover {
    background-color: #0056b3;
}

/* Sidebar Category List Specific Styling */
#sidebar .module_category #category_list {
    margin-top: 10px;
}
#sidebar #category_list li {
    margin-bottom: 5px;
    position: relative;
}
#sidebar #category_list li a {
    display: block;
    padding: 5px 10px;
    color: #555;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 3px;
    font-size: 0.95em;
}
#sidebar #category_list li a:hover {
    background-color: #f0f0f0;
    color: #007acc;
    text-decoration: none;
}
#sidebar #category_list li a.selected { /* 활성 카테고리 */
    background-color: #007acc;
    color: #fff;
    font-weight: 700;
}
#sidebar #category_list .c_cnt { /* 글 개수 */
    font-size: 0.8em;
    color: #999;
    margin-left: 6px;
    background-color: #eee;
    padding: 1px 5px;
    border-radius: 3px;
    vertical-align: middle;
}
#sidebar #category_list li a:hover .c_cnt {
    background-color: #ddd;
    color: #777;
}
#sidebar #category_list li a.selected .c_cnt {
    background-color: #fff;
    color: #007acc;
}
#sidebar #category_list ul ul { /* 하위 카테고리 */
    margin-top: 5px;
    padding-left: 20px;
    border-left: 2px solid #eee;
    margin-left: 5px;
}
#sidebar #category_list ul ul li {
    margin-bottom: 3px;
}
#sidebar #category_list ul ul li a {
    font-size: 0.9em;
    padding: 4px 8px;
}

/* Sidebar Recent Post/Comment List */
#sidebar .module_rctps ul li,
#sidebar .module_rctrp ul li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*===== Content Inner Elements Styling =====*/

/* List Page Styling (Including Search Results) */
.list-wrapper, .search-result {
    /* Common styles for list containers */
}
.search-result h2 { /* 검색 결과 제목 */
    font-size: 1.4em;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-weight: 700;
}
.list_content {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px dashed #eee;
    overflow: hidden;
}
.list_content:last-child {
    border-bottom: none;
}
.list_thumbnail {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
    max-width: 180px;
    border: 1px solid #eee;
}
.list_title {
    margin-bottom: 5px;
}
.list_title a {
    font-size: 1.6em;
    color: #333;
    font-weight: 700;
    font-family: 'Noto Sans KR', sans-serif;
}
.list_title a:hover {
    color: #007acc;
    text-decoration: none;
}
.list_meta {
    font-size: 0.9em;
    color: #888;
    margin-bottom: 10px;
}
.list_meta .category a, .list_meta .date { color: #888; }
.list_summary {
    color: #555;
    font-size: 0.95em;
    line-height: 1.7;
}

/* Article Page Styling */
.entry { /* 개별 글 전체 */ }
.entry-title {
    font-size: 2.2em;
    font-weight: 700;
    font-family: 'Noto Sans KR', sans-serif;
    margin-bottom: 10px;
    color: #222;
    line-height: 1.3;
}
.article-info {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.article-info .category a, .article-info .date { color: #777; }

.article-content {
    font-size: 1em;
    line-height: 1.8;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.article-content p { margin-bottom: 1.5em; }
.article-content h1, .article-content h2, .article-content h3,
.article-content h4, .article-content h5, .article-content h6 {
    margin-top: 2em;
    margin-bottom: 1em;
    font-weight: 700;
    font-family: 'Noto Sans KR', sans-serif;
    color: #333;
    line-height: 1.4;
}
.article-content h1 { font-size: 1.8em; border-bottom: 2px solid #eee; padding-bottom: 0.3em;}
.article-content h2 { font-size: 1.6em; border-bottom: 1px solid #eee; padding-bottom: 0.3em;}
.article-content h3 { font-size: 1.4em; }
.article-content h4 { font-size: 1.2em; }
.article-content blockquote {
    border-left: 4px solid #007acc;
    margin: 1.5em 0;
    padding: 15px 20px;
    background-color: #f8f9fa;
    color: #555;
    font-style: italic;
}
.article-content blockquote p { margin-bottom: 0; }
.article-content ul, .article-content ol { margin: 1em 0 1.5em 2em; }
.article-content ul li { list-style: disc; }
.article-content ol li { list-style: decimal; }
.article-content li { margin-bottom: 0.6em; }
.article-content pre {
    background-color: #2d2d2d;
    color: #ccc;
    padding: 15px;
    margin: 1.5em 0;
    border-radius: 5px;
    overflow-x: auto;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 0.95em;
    line-height: 1.5;
    white-space: pre;
}
.article-content code {
    background-color: #f1f1f1;
    padding: 3px 6px;
    border-radius: 3px;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 0.9em;
    color: #c7254e;
}
.article-content pre code {
    background-color: transparent; padding: 0; border-radius: 0; color: inherit; font-size: inherit; font-family: inherit; white-space: inherit;
}
.article-content img { margin: 1em auto; display: block; }
.article-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.95em; }
.article-content th, .article-content td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }
.article-content th { background-color: #f8f8f8; font-weight: 700; }

/* Article Tags */
.article-tags { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; }
.article-tags h3 { font-size: 1em; font-weight: 700; color: #555; margin-bottom: 10px; }
.article-tags .tag_label_rep { display: inline-block; background-color: #eee; color: #555; padding: 5px 10px; margin: 0 5px 5px 0; border-radius: 3px; font-size: 0.9em; transition: background-color 0.2s ease, color 0.2s ease; }
.article-tags .tag_label_rep:hover { background-color: #007acc; color: #fff; text-decoration: none; }

/* Share Buttons */
.share-buttons { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; text-align: center; }
.share-buttons h3 { font-size: 1em; font-weight: 700; color: #555; margin-bottom: 15px; text-align: left; }
.share-buttons button { background-color: #f0f0f0; border: 1px solid #ddd; padding: 8px 15px; margin: 0 5px 10px 5px; border-radius: 4px; cursor: pointer; font-size: 0.9em; color: #333; transition: background-color 0.2s ease, border-color 0.2s ease; font-family: 'Noto Sans KR', sans-serif; }
.share-buttons button:hover { background-color: #e0e0e0; border-color: #ccc; }

/* Related Articles */
.related-articles { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; }
.related-articles h3 { font-size: 1.2em; font-weight: 700; color: #444; margin-bottom: 15px; }
.related-articles ul li { margin-bottom: 8px; }
.related-articles ul li a { color: #555; }


/*===== Comment & Guestbook Styling =====*/
.comments, .guestbook {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.comments h3, .guestbook h2 { /* Section Titles */
    font-size: 1.2em;
    font-weight: 700;
    color: #444;
    margin-bottom: 20px;
}
.comments .comment-count { /* 댓글 수 */
    font-size: 0.9em;
    color: #007acc;
    margin-left: 5px;
}

/* Comment/Guestbook List */
/* Tistory uses #commentList, #guestbookList or similar */
#commentList ul, #guestbookList ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#commentList li, #guestbookList li { /* Individual comment/entry */
    padding: 20px 0;
    border-bottom: 1px dotted #eee; /* 구분선 */
}
#commentList li:last-child, #guestbookList li:last-child {
    border-bottom: none;
}

/* Comment/Guestbook Author Info */
.comment-meta, .guest-meta { /* Wrapper for author/date */
    margin-bottom: 10px;
    font-size: 0.9em;
    color: #777;
}
.comment-meta .author, .guest-meta .author {
    font-weight: 700;
    color: #444;
    margin-right: 10px;
}
.comment-meta .date, .guest-meta .date {
    /* Date styling if needed */
}
.comment-meta a, .guest-meta a { /* Author link */
    color: #444;
}
.comment-meta a:hover, .guest-meta a:hover {
    color: #007acc;
}

/* Comment/Guestbook Content */
.comment-content, .guest-content {
    line-height: 1.7;
    color: #555;
}
.comment-content p, .guest-content p {
    margin-bottom: 1em; /* Paragraph spacing */
}
.comment-content p:last-child, .guest-content p:last-child {
    margin-bottom: 0;
}

/* Comment Reply Button/Link */
.comment-reply-button { /* Adjust selector based on Tistory output */
    font-size: 0.85em;
    margin-top: 10px;
}
.comment-reply-button a {
    color: #007acc;
    font-weight: bold;
}

/* Nested Comments (Replies) */
#commentList .children { /* Tistory often uses this class */
    margin-top: 20px;
    margin-left: 30px; /* Indentation */
    padding-left: 20px;
    border-left: 2px solid #007acc; /* Indentation line */
}
#commentList .children li {
    padding: 15px 0; /* Slightly less padding for replies */
}

/* Comment/Guestbook Form */
/* Tistory uses #commentForm, #guestbookForm or similar */
.comment-form, .guestbook-form {
    margin-top: 30px;
    padding: 20px;
    background-color: #f8f9fa; /* Form background */
    border: 1px solid #e9ecef;
    border-radius: 4px;
}
.comment-form fieldset, .guestbook-form fieldset {
    border: none;
    padding: 0;
    margin: 0;
}
.comment-form .writer-info, .guestbook-form .writer-info { /* Name, PW, Homepage inputs */
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 10px; /* Spacing between inputs */
    margin-bottom: 15px;
}
.comment-form .writer-info input[type="text"],
.comment-form .writer-info input[type="password"],
.guestbook-form .writer-info input[type="text"],
.guestbook-form .writer-info input[type="password"] {
    flex: 1; /* Distribute space */
    min-width: 150px; /* Minimum width before wrapping */
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.95em;
    font-family: 'Noto Sans KR', sans-serif;
}
.comment-form textarea, .guestbook-form textarea { /* Text input area */
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.95em;
    font-family: 'Noto Sans KR', sans-serif;
    min-height: 100px; /* Minimum height */
    resize: vertical; /* Allow vertical resizing */
    margin-bottom: 15px;
}
.comment-form .submit, .guestbook-form .submit { /* Submit button area */
    text-align: right; /* Align button to the right */
}
.comment-form input[type="submit"], .guestbook-form input[type="submit"] {
    background-color: #007acc;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 700;
    transition: background-color 0.2s ease;
}
.comment-form input[type="submit"]:hover, .guestbook-form input[type="submit"]:hover {
    background-color: #0056b3;
}
/* Secret comment checkbox styling (if applicable) */
.comment-form .secret label, .guestbook-form .secret label {
    font-size: 0.9em;
    margin-left: 5px;
    color: #555;
}


/*===== Footer =====*/
#footer {
    padding: 30px;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    font-size: 0.9em;
    color: #888;
    background-color: #fdfdfd;
}
#footer .inner { }
#footer .paging {
    margin-bottom: 15px;
}
#footer .paging a, #footer .paging strong {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 3px;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #555;
}
#footer .paging a:hover {
    background-color: #eee;
    text-decoration: none;
    color: #333;
}
#footer .paging strong {
    font-weight: 700;
    background-color: #007acc;
    color: #fff;
    border-color: #007acc;
}
#footer p {
    margin-bottom: 5px;
}

/*===== Mobile Menu Styling =====*/
#mobile-menu-toggle { display: none; position: absolute; top: 50%; left: 15px; transform: translateY(-50%); width: 30px; height: 24px; background: none; border: none; padding: 0; cursor: pointer; z-index: 1001; }
#mobile-menu-toggle span { display: block; width: 100%; height: 3px; background-color: #333; margin-bottom: 5px; border-radius: 1px; transition: transform 0.3s ease, opacity 0.3s ease; }
#mobile-menu-toggle span:last-child { margin-bottom: 0; }
#mobile-nav { position: fixed; top: 0; left: 0; width: 280px; max-width: 80%; height: 100%; background-color: #fff; box-shadow: 2px 0 5px rgba(0,0,0,0.1); padding: 20px; padding-top: 50px; overflow-y: auto; z-index: 1000; transform: translateX(-100%); transition: transform 0.3s ease; }
#mobile-nav.is-open { transform: translateX(0); }
#mobile-menu-close { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 24px; line-height: 1; color: #888; cursor: pointer; padding: 5px; }
#mobile-menu-close:hover { color: #333; }
#mobile-nav .mobile-search-box { /* 모바일 메뉴 안 검색창 */
    margin-bottom: 20px;
}
#mobile-nav .mobile-search-box form { display: flex; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
#mobile-nav .mobile-search-box input[type="text"] { flex-grow: 1; padding: 8px 10px; border: none; font-size: 0.9em; outline: none; }
#mobile-nav .mobile-search-box input[type="submit"] { background-color: #007acc; color: white; border: none; padding: 0 12px; cursor: pointer; font-size: 0.9em; }
#mobile-nav h2 { font-size: 1.2em; font-weight: 700; color: #333; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 1px solid #eee; }
#mobile-nav #category_list { }
#mobile-nav #category_list ul { list-style: none; padding-left: 0; }
#mobile-nav #category_list li { margin-bottom: 5px; }
#mobile-nav #category_list li a { display: block; padding: 8px 10px; color: #444; border-radius: 3px; font-size: 1em; }
#mobile-nav #category_list li a:hover { background-color: #f0f0f0; text-decoration: none; }
#mobile-nav #category_list li a.selected { background-color: #007acc; color: #fff; font-weight: 700; }
#mobile-nav #category_list .c_cnt { font-size: 0.8em; color: #999; margin-left: 6px; background-color: #eee; padding: 1px 5px; border-radius: 3px; vertical-align: middle; }
#mobile-nav #category_list ul ul { margin-top: 5px; padding-left: 15px; border-left: none; }
#mobile-nav #category_list ul ul li a { font-size: 0.95em; padding: 6px 10px; }


/*===== Responsive Adjustments =====*/
@media (max-width: 768px) {
    body { font-size: 15px; -webkit-text-size-adjust: 100%; }
    #wrap { max-width: 100%; width: 100%; margin: 0; border: none; box-shadow: none; }
    #container { flex-direction: column; padding: 15px; }
    #sidebar { width: 100%; margin-right: 0; margin-bottom: 30px; }
    #content { width: 100%; }
    #header { padding: 25px 15px; padding-left: 50px; text-align: left; } /* Adjust padding for button */
    #header h1 { text-align: left; }
    #header h1 a { font-size: 2em; }
    #header .description { text-align: left; }
    #mobile-menu-toggle { display: block; } /* Show hamburger */
    #sidebar .search-box { display: none; } /* Hide sidebar search on mobile */
    .entry-title { font-size: 1.8em; }
    .list_thumbnail { max-width: 120px; margin-right: 15px; }
    .list_title a { font-size: 1.4em; }
    .list_summary { font-size: 0.9em; }
    .article-content { font-size: 0.95em; }
    .article-content h1 { font-size: 1.6em; }
    .article-content h2 { font-size: 1.4em; }
    .article-content h3 { font-size: 1.2em; }
    .comment-form .writer-info { flex-direction: column; gap: 0; } /* Stack writer inputs */
    .comment-form .writer-info input { margin-bottom: 10px; }
    #footer { padding: 20px 15px; }
    #footer .paging a, #footer .paging strong { padding: 6px 10px; }
}

@media (max-width: 480px) {
    body { font-size: 14px; }
    #header { padding: 20px 15px; padding-left: 50px; }
    #header h1 a { font-size: 1.8em; }
    .entry-title { font-size: 1.6em; }
    .list_title a { font-size: 1.3em; }
    .list_thumbnail { max-width: 100px; }
    .share-buttons button { padding: 6px 10px; font-size: 0.85em; }
    .comment-form, .guestbook-form { padding: 15px; }
}