/* components.css - UI 컴포넌트 */

/* Buttons */
input[type="submit"], input[type="reset"], input[type="button"], button, .button {
    appearance: none; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
    background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.15)), var(--bg-image-pattern);
    background-color: var(--color-primary);
    border-radius: 5px; border: 0; color: var(--text-invert); cursor: pointer; display: inline-block; padding: 0 1.5em; line-height: 2.75em; min-width: 9em; text-align: center; text-decoration: none; font-weight: 600;
    -webkit-tap-highlight-color: transparent;
}
input[type="submit"]:hover, button:hover, .button:hover { background-color: var(--color-primary-hover); color: var(--text-invert) !important; }
.button.alt { background-color: var(--btn-alt-bg); }
.button.alt:hover { background-color: var(--btn-alt-hover); }
.button.fit { width: 100%; }
.button.small { font-size: 0.8em; }

/* Forms */
input[type="text"], input[type="password"], input[type="email"], textarea, select {
    appearance: none; transition: border-color 0.2s;
    background: var(--bg-element); border: solid 1px var(--border-color); border-radius: 5px; color: inherit; display: block; outline: 0; padding: 0.75em; width: 100%; text-decoration: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--border-focus); }
label { display: block; font-weight: 600; margin-bottom: 0.5em; }
.form-control-wrapper { margin-top: 1em; padding: 0.75em; border: 1px solid var(--border-color); border-radius: 5px; cursor: pointer; }

/* Custom Checkbox */
.custom-checkbox { width: 22px; height: 22px; appearance: none; border: 1px solid var(--border-color); border-radius: 5px; background: var(--bg-element); cursor: pointer; position: relative; top: -2px; }
.custom-checkbox:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.custom-checkbox:checked::after { content: ''; position: absolute; top: 2px; left: 7px; width: 6px; height: 12px; border: solid var(--text-invert); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Icons */
.icon { text-decoration: none; position: relative; }
.icon:before { font-family: 'Font Awesome 5 Free'; font-weight: 400; font-style: normal; }
.icon.solid:before { font-weight: 900; }
.icon.brands:before { font-family: 'Font Awesome 5 Brands'; }
.icon.major {
    text-align: center; cursor: default; background-color: var(--color-primary); color: var(--text-invert); border-radius: 100%; display: inline-block; width: 5em; height: 5em; line-height: 5em; box-shadow: 0 0 0 7px var(--bg-element), 0 0 0 8px var(--border-color); margin: 0 0 2em 0;
}

/* Images */
.image { border: 0; display: inline-block; position: relative; border-radius: 5px; max-width: 100%; }
.image img { display: block; border-radius: 5px; width: 100%; max-width: 100%; height: auto; }
.image.left { float: left; margin: 0 2em 2em 0; width: 30%; }
.image.featured { display: block; margin: 0 0 2em 0; }

/* Box (Posts) */
.box.post { position: relative; margin: 0 0 2em 0; background: var(--bg-element); padding: 1.5em; border-radius: 5px; border: 1px solid var(--border-color); }
.box.post:after { content: ''; display: block; clear: both; }
.box.post .image { width: 30%; margin: 0; float: left; margin-right: 2em; }
/* 모바일에서 박스 레이아웃 조정 */
@media screen and (max-width: 736px) {
    .box.post .image { width: 100%; float: none; margin-right: 0; margin-bottom: 1em; }
}

/* Lists & Tables */
ul.links { list-style: none; padding-left: 0; } ul.links li { line-height: 2.5em; }
ul.icons { cursor: default; list-style: none; padding-left: 0; } ul.icons li { display: inline-block; padding-left: 1.5em; }
ul.actions { display: flex; list-style: none; padding-left: 0; margin-left: -1em; } ul.actions li { padding-left: 1em; }
ul.actions.stacked { flex-direction: column; margin-left: 0; } ul.actions.stacked li { padding: 1.25em 0 0 0; }

table.default { width: 100%; }
table.default tbody tr { border-bottom: solid 1px var(--border-color); }
table.default td { padding: 0.5em 1em; }
table.default th { font-weight: 600; padding: 0.5em 1em; text-align: left; }
table.default thead { background-color: var(--btn-alt-bg); color: var(--text-invert); }

/* Dropotron */
.dropotron {
    background-color: var(--bg-nav); border-radius: 5px; color: var(--text-invert); min-width: 10em; padding: 1em 0; text-align: center; box-shadow: 0 1em 1em 0 rgba(0,0,0,0.5); list-style: none;
    background-image: linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0)), var(--bg-image-pattern);
}
.dropotron > li { line-height: 2em; padding: 0 1em; }
.dropotron > li > a { color: var(--text-nav); text-decoration: none; border: 0; }
.dropotron > li:hover > a { color: var(--text-invert); }

/* Popups & Overlays */
.dim_layer, .login_overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background-color: rgba(0, 0, 0, 0.4);
}
.pop_layer, .login_popup {
    display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 450px; max-width: 90%; background-color: var(--bg-element); border: 1px solid var(--border-color); box-shadow: 0 0 15px rgba(0,0,0,0.15); z-index: 1001; border-radius: 5px;
}
.pop_layer .pop_container, .login_popup { padding: 2em; }
.pop_layer h2 { font-size: 1.75em; margin-bottom: 1em; text-align: center; color: var(--text-main); }
.btn_r { width: 100%; margin-top: 1.5em; padding-top: 1em; border-top: 1px solid var(--border-color); text-align: right; }
a.btn_layerClose, .login_close {
    display: inline-block; padding: 0 1.5em; line-height: 2.75em; font-weight: 600; border-radius: 5px; background-color: var(--btn-alt-bg); color: var(--text-invert); cursor: pointer;
}
a.btn_layerClose:hover { background-color: var(--btn-alt-hover); color: var(--text-invert) !important; }

/* Tags */
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: 1px solid var(--border-color); }
.tag-item { display: inline-block; background-color: var(--bg-element-alt); border: 1px solid var(--border-color); border-radius: 15px; padding: 0.3em 0.9em; font-size: 0.9em; cursor: pointer; color: var(--text-main); }
.tag-item:hover { background-color: var(--border-color); }
.staging-area { min-height: 40px; padding: 0.5em; background: var(--bg-element); border: 1px dashed var(--border-color); border-radius: 5px; }
.remove-tag { color: var(--btn-danger); margin-left: 8px; font-weight: bold; }