/* 데스크톱 스타일 */
@media (min-width: 769px) {
    html, body {
        height: 100vh;
        width: 100vw;
        margin: 0;
        display: grid;
        justify-items: center;
        background: white;
        font-family: my-font, sans-serif;
        grid-template-rows: 1fr 10fr;
    }

    #content-section {
        display: grid;
        justify-items: center;
        align-items: center;
        width: 100vw;
        height: 90%;
        max-height: 100%;
        overflow: scroll;
        grid-template-columns: 1fr 2fr 1fr;
    }

    #art-create-section {
        display: grid;
        grid-template-rows: auto 1fr;
        width: 100%;
        height: 100%;
        max-height: 100%;
        font-family: my-font, sans-serif;
        overflow: hidden;
        box-sizing: border-box;
    }

    #create-header-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
    }

    #header-title {
        color: darkslateblue;
        font-size: 25px;
        margin: 0;
    }

    #create-content-section {
        width: 100%;
        height: 100%;
        padding: 2% 5%;
        box-sizing: border-box;
        overflow-y: auto;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    #art-form {
        width: 100%;
        max-width: 560px;
        background: white;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column;
        gap: 16px;
        box-sizing: border-box;
    }

    #canvas-section {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        flex-shrink: 0;
    }

    #canvas-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        max-width: 100%;
        overflow: auto;
    }

    #pixel-canvas {
        border-radius: 8px;
        cursor: cell;
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        image-rendering: crisp-edges;
    }

    #title-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    #title-section label {
        font-weight: bold;
        color: #333;
        font-family: my-font, sans-serif;
    }

    #title {
        padding: 12px 16px;
        border: 1px solid #dbdbdb;
        border-radius: 8px;
        font-size: 15px;
        font-family: my-font, sans-serif;
        box-sizing: border-box;
        outline: none;
    }

    #title:focus {
        border-color: #514897;
    }

    #submit-btn {
        width: 100%;
        padding: 16px;
        background: #514897;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: bold;
        font-family: my-font, sans-serif;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    #submit-btn:hover {
        background: rgba(72, 61, 139, 0.68);
    }
}

/* 모바일 스타일 */
@media (max-width: 768px) {
    html, body {
        height: 100dvh;
        width: 100vw;
        margin: 0;
        background: white;
        font-family: my-font, sans-serif;
        overflow: hidden;
        display: grid;
        grid-template-rows: 18fr 82fr;
    }

    #content-section {
        display: grid;
        justify-items: center;
        align-items: center;
        width: 100vw;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
        grid-template-rows: 1fr 9fr;
    }

    #art-create-section {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        font-family: my-font, sans-serif;
        overflow: hidden;
        box-sizing: border-box;
    }

    #create-header-section {
        display: none;
    }

    #create-content-section {
        width: 100%;
        height: 100%;
        padding: 0 12px 12px 12px;
        box-sizing: border-box;
        overflow-y: auto;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

    #art-form {
        width: 100%;
        max-width: 100%;
        background: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        box-sizing: border-box;
    }

    #title-section {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: white;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    #title-section label {
        font-weight: bold;
        color: #333;
        font-family: my-font, sans-serif;
        font-size: 0.7rem;
    }

    #title {
        width: 100%;
        padding: 8px;
        border: 1px solid #dbdbdb;
        border-radius: 8px;
        font-size: 0.6rem;
        font-family: my-font, sans-serif;
        box-sizing: border-box;
        outline: none;
    }

    #title:focus {
        border-color: #514897;
    }

    #canvas-section {
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex-shrink: 0;
    }

    #canvas-wrapper {
        background: white;
        border-radius: 10px;
        padding: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 100%;
        overflow: auto;
    }

    #pixel-canvas {
        border-radius: 8px;
        cursor: pointer;
        image-rendering: pixelated;
        image-rendering: -moz-crisp-edges;
        image-rendering: crisp-edges;
        max-width: 100%;
        height: auto;
    }

    #submit-btn {
        width: 100%;
        padding: 12px;
        background: #514897;
        color: white;
        border: none;
        border-radius: 10px;
        font-size: 0.8rem;
        font-weight: bold;
        font-family: my-font, sans-serif;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    #submit-btn:active {
        transform: scale(0.98);
    }
}