/* mobile.css - Styles for screens 768px and narrower */
/* All colors are now driven by CSS variables from index.css */

/* General mobile container styles for screens <= 768px */
.container {
    width: 96%; 
    padding: 0 8px; 
}

/* Header adjustments */
header {
    padding: 0; 
    border-bottom-width: 2px; 
}

header .container {
    display: grid;
    /* Columns: Zetjawiki title takes auto width, search form takes the rest */
    grid-template-columns: auto 1fr; 
    grid-template-rows: auto auto;    /* Row 1 for title/search, Row 2 for nav */
    grid-template-areas:
        "title    search"   /* Title left, Search form right on the first row */
        "navlinks navlinks"; /* Navlinks span both columns on the second row */
    align-items: stretch; /* Stretch items to fill cell height */
    padding: 0; 
    gap: 0.1rem 0; 
    width: 100%; 
}

/* Row 1: Title ("Zetjawiki") */
header h1 {
    grid-area: title;
    display: flex; /* To align 'a' tag vertically */
    align-items: center; /* Vertical alignment for 'a' */
    margin: 0; 
    background-color: var(--content-bg); 
    border-bottom: 1px solid var(--strong-border-color); 
    padding: 0 0.6rem; /* Consistent padding with search form */
}
header h1 a {
    font-size: 1.0rem; /* Restored sensible mobile font size */
    color: var(--text-color); /* Use theme variable */
    text-decoration: none;
    display: inline-block; /* Allow padding to work as expected */
    padding: 0.4rem 0; /* Vertical padding to match search input approx */
}

/* Row 1: Search Form */
#search-form {
    grid-area: search;
    display: flex;
    align-items: stretch; /* Stretch input and button */
    width: 100%;
    margin: 0; 
    background-color: var(--content-bg); 
    border-bottom: 1px solid var(--strong-border-color);
}

/* Shuffle icon removed */
/* #search-form::before { ... } */

#search-input {
    flex-grow: 1;
    padding: 0.4rem 0.7rem; /* Match desktop for consistency, adjust if needed */
    font-size: 0.9rem;
    border-radius: 0;
    border: none; 
    margin: 0;
    background-color: transparent; 
    color: var(--text-color); 
}

#search-input::placeholder {
    color: var(--secondary-text-color); 
}

#search-form button {
    padding: 0.4rem 0.8rem; /* Padding for text button */
    font-size: 0.9rem;  /* Text size */
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--border-color); /* Separator line like in original image context */
    margin: 0;
    background-color: transparent; 
    color: var(--text-color); 
    cursor: pointer;
    white-space: nowrap; /* Prevent "검색" from wrapping */
}
#search-form button:hover {
    background-color: var(--border-color); 
}

/* Row 2: Navigation Links */
#header-nav-links {
    grid-area: navlinks;
    justify-self: stretch; /* Make nav links container span full width */
    display: flex;
    align-items: center;
    justify-content: center; /* Center nav items */
    flex-wrap: wrap; /* Allow wrapping if too many items */
    list-style: none;
    padding: 0.2rem 8px; 
    margin: 0;
    background-color: var(--header-bg); /* Match original header bg for this row */
    gap: 0.3rem 0.5rem; /* Spacing between nav items */
}

#header-nav-links li {
    margin: 0; 
}

#header-nav-links li a {
    padding: 0.2rem 0.3rem; 
    font-size: 0.8rem;  /* Restored sensible mobile font size */
    text-align: center;
    color: var(--header-text); /* Use header text color for links */
    text-decoration: none;
    border-radius: var(--control-border-radius);
}
#header-nav-links li a:hover,
#header-nav-links li a:focus,
#header-nav-links li a.active-dropdown {
    background-color: var(--header-link-hover-bg);
}


/* Right Content Area for mobile (general) */
#right-content {
    padding: 1rem;
}

/* WYSIWYG Toolbar for mobile (general) */
#wysiwyg-toolbar {
    padding: 0.3rem;
    gap: 0.3rem; 
}
.wysiwyg-toolbar-group button,
.wysiwyg-toolbar-button {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    height: 2.2rem; /* 모바일에서도 동일한 높이 적용 */
    min-height: 2.2rem; /* 최소 높이 보장 */
}

/* 첫 번째 그룹 버튼들을 정사각형으로 만들기 (모바일) */
.wysiwyg-toolbar-group:first-child button {
    width: 2.2rem;
    min-width: 2.2rem;
    padding: 0;
}

/* 두 번째 그룹 버튼들도 정사각형으로 만들기 (모바일) */
.wysiwyg-script-ruby-group button {
    width: 2.2rem;
    min-width: 2.2rem;
    padding: 0;
}


/* Styles for very small screens (480px and below) */
@media (max-width: 480px) {
    .container { 
        width: 98%; 
        padding: 0 4px; 
    }

    header .container {
        gap: 0.05rem 0; 
    }

    /* Row 1: Title adjustments for very small screens */
    header h1 {
      padding: 0 0.5rem;
    }
    header h1 a {
        font-size: 0.9rem; /* Restored sensible mobile font size for small screens */
        padding: 0.35rem 0;
    }

    /* Row 1: Search form adjustments for very small screens */
    #search-input {
        font-size: 0.85rem; 
        padding: 0.35rem 0.6rem; 
    }
    #search-form button {
        font-size: 0.85rem; 
        padding: 0.35rem 0.6rem; 
    }

    /* Row 2: Nav links adjustments for very small screens */
    #header-nav-links {
        padding: 0.15rem 4px; 
        gap: 0.2rem 0.3rem; 
        justify-content: space-around; /* Better distribution on small screens */
    }
    #header-nav-links li a {
        font-size: 0.75rem; /* Restored sensible mobile font size for small screens */
        padding: 0.15rem 0.2rem; 
    }

    /* Content and WYSIWYG adjustments for very small screens */
    #right-content {
        padding: 0.8rem;
    }
     .wysiwyg-toolbar-group button,
    .wysiwyg-toolbar-button {
        padding: 0.2rem 0.4rem;
        font-size: 0.8rem;
        height: 2rem; /* 작은 화면에서는 조금 더 작은 높이 */
        min-height: 2rem; /* 최소 높이 보장 */
    }
    
    /* 작은 화면에서도 첫 번째 그룹 버튼들을 정사각형으로 */
    .wysiwyg-toolbar-group:first-child button {
        width: 2rem;
        min-width: 2rem;
        padding: 0;
    }
    
    /* 작은 화면에서도 두 번째 그룹 버튼들을 정사각형으로 */
    .wysiwyg-script-ruby-group button {
        width: 2rem;
        min-width: 2rem;
        padding: 0;
    }
    #wysiwyg-controls button {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
}