/* 기본 스타일링 (CSS) */
html,body {font-family:sans-serif;margin:0;-ms-overflow-style:none;scrollbar-width:none;background-color:#0f0f0f;}
body::-webkit-scrollbar {display:none;}
.header {display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #ddd;}
.mheader {display:none;}
.logo {font-size:1.5rem;font-weight: bold;width:100px;}
.nav a {margin:0 1rem;text-decoration:none;color:#333;}
.mnav {display:none;position:relative;width:100%;background-color:linear-gradient(to top bottom,#f9f9f9,#f4f4f4);border-top:1px solid #ddd;/*box-shadow:0 2px 5px rgba(0,0,0,0.1);*/padding:1rem 0;text-align:center;}
.mnav a {display:block;margin:0 1rem;text-decoration:none;color:#333;}
.mnav.active {display:block;transition:top 0.3s ease;}
.hero {text-align:center;padding:2rem 1rem;background-color:#f4f4f4;}
.search-bar {width:80%;max-width:600px;padding:0.8rem;border:1px solid #ccc;border-radius:25px;}
.gallery {display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;padding:2rem;}
.gallery-item {border:1px solid #ddd;border-radius:5px;overflow: hidden;}
.gallery-item img {width:100%;height:auto;display:block;}
.footer { width:100%;text-align:center;padding:0.5rem;background-color:#333;color:white;position:fixed;bottom:0;}

a {outline:none;text-decoration:none;color: #333;}
:link:focus,:visited:focus {-moz-outline:none;text-decoration:none;color:#333;}
.page {width:100%;max-width:1600px;margin-left:auto;margin-right:auto;padding-left:32px;padding-right:32px;min-height:800px;}
.menu {width:200px;flex-direction:column;flex-shrink:0;align-self:self-start;display:flex;position:sticky;}
.menubtnon {justify-content:flex-start;line-height:32pt;color:#191b26;background:#f7f7f7;box-sizing:border-box;border-radius:24px;height:40px;padding:0 16px;}
.menubtn {justify-content:flex-start;line-height:32pt;height:40px;padding:0 16px;}
.mbtn {display:none;position:absolute;top:35px;right:35px;}
.box {width:100%;height:600px;}
.boxtitle {margin-bottom:8px;font-size:16px;font-weight:700;}
.boxsubtitle {color:rgba(25, 27, 38, .64);margin-bottom: 24px;}
.inputcontainer {width:100%;}   
.inputstyle {cursor:text;color:#191b26;border:1px solid rgba(25, 27, 38, .24);border-radius:8px;outline:none;padding:10px 12px;transition:border .2s;width:100%;overflow-wrap:break-word;}
.boxstyle {cursor:text;color:#191b26;border:1px solid rgba(25, 27, 38, .24);border-radius:8px;outline:none;padding:10px 12px;transition:border .2s;width:100%;overflow-wrap:break-word;}
.roundwnborder {color:#191b26;border:0;border-radius:8px;outline:none;width:100%;}
.pbold {margin:0 1rem;text-decoration:none;color:#333;font-weight:bold;}

.masonry {column-count:3;}
.masonryitem {display:inline-block;width:100%;margin-bottom:15px;break-inside:avoid;
    position:relative;overflow:hidden;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,0.1);}
.masonryitem img {width:100%;height:auto;display:block;transition:transform 0.3s ease;}
.masonryitem:hover img {transform:scale(1.05);}
.masonryitem .overlay {position:absolute;bottom:0;left:0;width:100%;background:rgba(0, 0, 0, 0.5);color:white;
    padding:10px;text-align:center;opacity:0;transition:opacity 0.3s ease;}
.masonryitem:hover .overlay {opacity:1;}

.left {text-align:left;}
.bold {font-weight:bold;}
.bottom {margin-bottom:16px;}
.block {display:block;}
.center {text-align:center;}

.btn {color:#191b26;background:#fff;border:1px solid #ceced2;box-sizing:border-box;border-radius:24px;height:40px;padding:0 16px;
    transition:border .2s ease-in;cursor:pointer;min-width:100px;}
.btntxt {color:inherit;justify-content:center;align-items:center;font-weight:600;display:flex;line-height:30pt}

@media (max-width: 992px) {.masonry {column-count:3;}}
@media (max-width: 768px) {
    .masonry {column-count:2;}
    .header {display:flex;}
    .mheader {display:none;}
    .footer {padding:0.5rem;}
    .search-bar {padding:0.8rem}
    .hero {padding:2rem 1rem;}
    .mbtn {display:none;}
}
@media (max-width: 480px) {
    .masonry {column-count:1;}
    .header {display:none;}
    .mheader {display:block;}
    .footer {padding:0.2rem;}
    .search-bar {padding:0.3rem}
    .hero {padding:1rem 1rem;}
    .mbtn {display:block;}
}