/* style.css */

:root{
    --ui-w:380px;
    --gap:16px;
    --bg:#f7f7f7;
    --muted:#6b6b6b;
    --accent:#0b74de;
}

html,body{height:100%;}
body{
    margin:0;
    padding-top: var(--header-offset, 80px);
    font-family:"Noto Sans JP",system-ui,Roboto,Arial;
    background:#f5f5f5;
    color:#222;
}

body.menu-open{
    overflow:hidden;
}

.header-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #f5f5f5;
    z-index: 1000;
    padding: 18px 18px 8px;
}

.header-top {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 24px;
}

.header-undo-redo {
    margin-right: 104px;
}

.header-right-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f0f0;
    border: 1px solid #ddd;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.home-btn:hover {
    background: #e8e8e8;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.home-icon {
    font-size: 20px;
    line-height: 1;
}

h3{margin:0 0 12px 0;font-size:18px;}

.aspect-ratio-controls {
    display: flex;
    gap: 16px;
    justify-content: center;
    background: transparent;
    padding: 8px 6px;
    border-radius: 8px;
    margin: 0 auto 16px;
    max-width: 600px;
}
.aspect-ratio-controls label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
}
.aspect-ratio-controls input[type="radio"] {
    transform: translateY(1px);
}

.container{
    display:flex;
    gap:var(--gap);
    align-items:flex-start;
    min-height:calc(100vh - 36px);
}

.main-content{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.previewWrap{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.squareViewport{
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1 / 1;
    background:#fff;
    border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,0.06);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    margin: 0 auto;
}

canvas{
    width:100%;
    height:100%;
    display:block;
    background:transparent;
}

.sidebar{
    width:var(--ui-w);
    background:var(--bg);
    border-radius:12px;
    padding:14px;
    box-sizing:border-box;
    border:1px solid #e9e9e9;
    height:calc(100vh - 36px);
    overflow:auto;
    position: sticky;
    top: 18px;
}

.menu-toggle-handle{
    display:none;
    position:fixed;
    right:12px;
    top:var(--handle-top, 160px);
    transform:none;
    z-index:1250;
    width:36px;
    height:120px;
    padding:10px 6px;
    border-radius:18px 0 0 18px;
    border:1px solid #ddd;
    background:#f0f0f0;
    color:#222;
    font-size:12px;
    cursor:pointer;
    transition:all 0.2s ease;
    box-shadow:0 4px 10px rgba(0,0,0,0.12);
    writing-mode:vertical-rl;
    text-orientation:upright;
    letter-spacing:0.2em;
    text-align:center;
}
.menu-toggle-handle:hover{
    background:#e8e8e8;
}

.sidebar-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.35);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease;
    z-index:1100;
}

body.menu-mode .main-content{
    width:100%;
}

body.menu-mode .menu-toggle-handle{
    display:flex;
    align-items:center;
    justify-content:center;
}

body.menu-mode .sidebar{
    position:fixed;
    top:84px;
    right:12px;
    left:auto;
    height:calc(100vh - 96px);
    max-height:calc(100vh - 96px);
    width:min(92vw, var(--ui-w));
    transform:translateX(120%);
    transition:transform 0.25s ease;
    z-index:1200;
    box-shadow:0 12px 32px rgba(0,0,0,0.18);
}

body.menu-open .sidebar{
    transform:translateX(0);
}

body.menu-open .menu-toggle-handle{
    transform:translateX(calc(-1 * var(--drawer-w, 360px)));
}

body.menu-open .sidebar-backdrop{
    opacity:1;
    pointer-events:auto;
}

.panel{
    background:#fff;
    border-radius:10px;
    padding:12px;
    margin-bottom:12px;
    border:2px solid #eee;
}

.fileSlot{
    border:2px dashed #e0e0e0;
    border-radius:8px;
    padding:10px;
    text-align:center;
    cursor:pointer;
    background:linear-gradient(#fff,#fbfbfb);
}

.fileSlot.dragover{
    border-color:#0b74de;
    background:#eef6ff;
}

.slotControls{
    margin-top:8px;
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:center;
}

.btn{
    background:#d0d0d0;
    color:#222;
    border-radius:8px;
    padding:8px 10px;
    border:1px solid rgba(0,0,0,0.06);
    cursor:pointer;
}

.btnPrimary{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
}

.slotInfo{
    display:flex;
    gap:10px;
    align-items:center;
    margin-top:8px;
}

.thumb{
    width:56px;
    height:56px;
    object-fit:cover;
    border-radius:6px;
    border:1px solid #e6e6e6;
    background:#fafafa;
}

.fileMeta{
    font-size:13px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    flex:1;
}

.removeBtn{
    background:#ef6b6b;
    color:#fff;
    border:none;
    padding:6px 8px;
    border-radius:8px;
    cursor:pointer;
}

textarea{
    width:100%;
    min-height:72px;
    padding:8px;
    border-radius:8px;
    border:1px solid #e6e6e6;
    box-sizing:border-box;
    resize:vertical;
}

input[type="number"],select{
    padding:8px;
    border-radius:8px;
    border:1px solid #e6e6e6;
    width:100%;
    box-sizing:border-box;
}

input[type="color"]{
    height:36px;
    width:100%;
    padding:4px;
    border-radius:8px;
    border:1px solid #e6e6e6;
}

input[type="range"]{width:100%;}

.bandRow{
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex-direction: column;
}

.muted{font-size:12px;color:var(--muted);}
.smallNote{font-size:12px;color:#666;margin-top:6px;}

.row{
    display:flex;
    gap:8px;
    align-items:center;
}

.val{
    min-width:48px;
    text-align:right;
    font-size:13px;
    color:#333;
}


.controlRow{
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 12px;
    flex-direction: column;
}

.controlRow select{
    flex:1;
    padding:8px;
    border-radius:8px;
    border:1px solid #e6e6e6;
    box-sizing:border-box;
}

.controlRow .btn{
    padding:8px 10px;
    min-width:84px;
}

.controlRow .removeBtn{
    padding:6px 8px;
    min-width:64px;
    background:#ef6b6b;
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
}

input[type="range"].disabled,
input[type="range"]:disabled {
    opacity: 0.45;
    filter: grayscale(60%);
    pointer-events: none;
}

#exportBtn {
    display: block;
    margin: 0 auto;
    text-align: center;
}

.header-undo-redo {
    display: flex;
    gap: 8px;
    align-items: center;
}

.header-action-btn {
    height: 36px;
    padding: 0 12px;
    border-radius: 18px;
    border: 1px solid #ddd;
    background: #f0f0f0;
    color: #222;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.header-action-btn:hover:not(:disabled) {
    background: #e8e8e8;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.undo-redo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f0f0;
    border: 1px solid #ddd;
    color: #222;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    padding: 0;
    flex: 0 0 auto;
}

@media (max-width: 860px){
    :root{ --header-offset: 110px; }
    .header-container{
        padding: 12px 12px 8px;
    }
    .header-top{
        flex-wrap: wrap;
        gap: 8px;
    }
    h3{
        margin: 0;
        font-size: 16px;
    }
    .header-actions{
        width: 100%;
        margin-left: 0;
        padding-right: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }
    .header-undo-redo{
        margin-right: 0;
    }
    .header-right-actions{
        margin-left: auto;
    }
}

@media (max-width: 520px){
    :root{ --header-offset: 130px; }
    .home-btn{
        width: 34px;
        height: 34px;
    }
    .home-icon{ font-size: 18px; }
    .header-action-btn{
        height: 32px;
        padding: 0 10px;
        font-size: 11px;
    }
    .undo-redo-btn{
        width: 34px;
        height: 34px;
    }
}

.undo-redo-btn:hover:not(:disabled) {
    background: #e8e8e8;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.undo-redo-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: #999;
}

.undo-redo-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1001;
}

.undo-redo-btn:hover::after {
    opacity: 1;
}

.undo-redo-btn svg {
    width: 20px;
    height: 20px;
}

.positionRow {
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

#tabImages .positionRow {
    margin-top: 14px;
    margin-bottom: 14px;
}

.posInput {
    width: 50px;
    padding: 2px 4px;
    font-size: 11px;
}

.positionRow.three-cols .posInput {
    width: 52px;
}

.tabBar {
    display: flex;
    gap: 6px;
    margin-bottom: 0;
    position: sticky;
    top: -14px;
    z-index: 10;
    background: var(--bg);
    padding: 14px 14px 0;
    margin: -14px -14px 0;
    box-shadow: none;
}

.tabBtn {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #ddd;
    background: #f3f3f3;
    border-radius: 6px 6px 0 0;
    font-size: 13px;
    color: #555;
    cursor: pointer;
}

.tabBtn.active {
    background: #fff;
    color: #222;
    border-color: #ddd;
    border-bottom-color: transparent;
}

.tabPanel {
    display: none;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 10px 10px 0;
    background: #fff;
}

.tabPanel.active {
    display: block;
}

.tabPanel .panel + .panel {
    margin-top: 10px;
}