/* style.css */
body {
    margin: 0;
    padding: 20px;
    background: radial-gradient(circle at 50% 50%, #fceaf9 0%, #dcdbff 100%);
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    touch-action: none;
    overflow: hidden;
    min-height: 100dvh;
    font-family: 'Pretendard', sans-serif;
    box-sizing: border-box;
}

#app-container {
    width: 100%;
    max-width: 400px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding-bottom: 200px;
}

#header-top {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-shrink: 0;
}

#sticker-menu-btn {
    background: rgba(255, 255, 255, 0.6);
    color: #6a6a9d;
    border: 2px solid #d1b3ff;
    padding: 8px 12px;
    border-radius: 15px;
    font-weight: bold;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: 0.2s;
}

#sticker-menu-btn:hover {
    background: #6a6a9d;
    color: white;
}

#current-keyring-title {
    border: none;
    background: transparent;
    outline: none;

    color: #6a6a9d;
    font-size: 2em;
    font-weight: bold;

    field-sizing: content; 
    width: auto;

    text-align: right;
    padding: 0;
    margin-bottom: 5px
}

#goal-container { 
    width: 90%; 
    background: rgba(255, 255, 255, 0.4);
    padding: 15px 20px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    text-align: center;
    flex-shrink: 0;
}

#goalAmountInput {
    border: none;
    background: transparent;
    outline: none;
    font-size: inherit;
    color: inherit;
    font-weight: inherit;

    field-sizing: content; 
    width: auto;

    text-align: right;
    padding: 0;
    margin:0;
}

/* 숫자 입력창의 화살표 제거 */
#goalAmountInput::-webkit-outer-spin-button,
#goalAmountInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* 파이어 폭스 */
#goalAmountInput {
    -moz-appearance: textfield;
}

#progress-bar { width: 100%; height: 10px; background: rgba(255,255,255,0.5); border-radius: 5px; overflow: hidden; }
#progress-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #ffc1e3, #d1b3ff); transition: 0.5s; }

.modal { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.2); 
    pointer-events: none;
    align-items: center; 
    justify-content: center; 
    z-index: 9999;
    backdrop-filter: blur(3px);
}

.modal-content { 
    pointer-events: auto;
    background: white; 
    padding: 20px; 
    border-radius: 20px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    text-align: center; 
}

.modal-content input[type="text"] {
    border: none;
    background: transparent;
    outline: none;
    font-size: inherit;
    color: inherit;
    font-weight: inherit;

    field-sizing: content; 
    width: auto;
    
    text-align: right;
    padding: 0;
    margin: 0;
}

/* 스티커 판 */
.modal-menu {
    background: rgba(255, 255, 255, 0.9);
    width: 90%;
    max-width: 400px;
    padding: 20px;
    border-radius: 25px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 80vh;
    overflow-y: auto;
    pointer-events: auto;
}

.sticker-board {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-height: 250px;
    overflow-y: auto;
    padding: 5px;
}

.sticker-card {
    background: #fff;
    border: 2px dashed #d1b3ff;
    padding: 20px 16px;
    border-radius: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    position: relative;
}

.sticker-card.active {
    border: 2px solid #6a6a9d;
    background: #f3f0ff;
}

.delete-keyring-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    color: #b0b0d0;
    border: none;
    font-size: 18px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    transition: 0.2s;
}

.delete-keyring-btn:hover {
    background: #ffcccc;
    color: #ff4d4d;
}

.sticker-preview {
    font-size: 18px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: break-all;
}

/* 메뉴 - 디자인 버튼*/
.keyring-actions{
    display:flex;
    gap:8px;
    margin-top:10px;
}

.keyring-actions button{
    flex:1;
}

.keyring-actions button:last-child{
    flex:0;
    width:42px;
}

#design-grid {
    max-height: 380px;
    padding-right: 4px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    margin-bottom: 16px;
}

.menu-column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.column-header-box h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    color: #4b5563;
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 6px;
}

.design-card {
    position: relative;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 16px 12px;
    text-align: center;
    transition: all 0.25s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
}

.design-card.active {
    border-color: #6a6a9d;
    background: #f5f3ff;
}

.design-preview {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    position: relative;
    flex-shrink: 0;
    transform: perspective(200px) rotateX(10.3deg) rotateY(-20deg) scale(1);
    transform-style: preserve-3d;
    transition: transform 0.2s;
}
.design-card:hover .design-preview {
    transform: perspective(200px) rotateX(12deg) rotateY(-25deg) scale(1.05);
}

.keyring-mini-side, .keyring-mini-shadow, .keyring-mini-highlight {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    clip-path: inherit; pointer-events: none;
}

.keyring-mini-side { background: radial-gradient(circle at 6% 3.09%, transparent 40%, rgba(255, 255, 255, 0.25) 100%); z-index: 2; }
.keyring-mini-shadow { box-shadow: rgba(0, 0, 0, 0.15) 3px 2px 6px inset, rgba(255, 255, 255, 0.4) -2px -1px 3px inset; z-index: 3; }
.keyring-mini-highlight { background-image: radial-gradient(circle at 5% 14.5529%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.25) 35%, transparent 70%); z-index: 4; }

.design-card-name {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.design-card.active .design-card-name {
    color: #6a6a9d;
}

/* 스티커 카드 하단 액션 버튼 스타일 이식 */
.design-card .keyring-actions {
    display: flex;
    width: 100%;
}

/* 선택되어 활성화된 상태의 하단 버튼 반전 효과 */
.design-card.active {
    background: #ffffff;
    border-color: #6a6a9d;
}
/********************/

.create-keyring-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(230, 220, 255, 0.3);
    padding: 12px;
    border-radius: 15px;
}

.close-btn {
    background: #ff9a9e;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
}

/* 키링 */
#keyring-box {
    width: min(72vw, 35dvh);
    max-width: 280px;
    aspect-ratio: 1/1;

    background: rgba(255, 255, 255, 0.3);
    
    position: relative;
    isolation:isolate;
    overflow: hidden;

    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 
        inset 0 10px 20px rgba(255, 255, 255, 0.9),
        inset 0 -10px 20px rgba(0, 0, 0, 0.1),
        0 20px 40px rgba(0, 0, 0, 0.2);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    margin-top: auto;
    margin-bottom: auto;
}

/* 키링 디자인 */ 
#keyring-box{
    width:min(72vw,35dvh);
    max-width:280px;
    aspect-ratio:1;

    overflow:hidden;

    position:relative;

    transition:.25s;
}

#keyring-highlight{

    position:absolute;
    inset:0;

    pointer-events:none;

    border-radius:inherit;

    opacity:.45;

    mix-blend-mode: overlay;

    z-index:5;
}

#keyring-box{
    --light-shadow-x:0px;
    --light-shadow-y:0px;

    box-shadow:
        var(--design-shadow),
        inset var(--light-shadow-x)
        var(--light-shadow-y)
        30px rgba(0,0,0,.22);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

#keyring-shadow{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    border-radius:inherit;

    pointer-events:none;

    z-index:3;

}

/* ===== Glass ===== */

#keyring-box.glass,
.design-preview.glass{
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.8), transparent 45%),
        linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.08));

    border:2px solid rgba(255,255,255,.55);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    --design-shadow:
        0 18px 35px rgba(0,0,0,.18),
        inset 0 5px 12px rgba(255,255,255,.9),
        inset 0 -8px 15px rgba(0,0,0,.08);

    --highlight-color: rgba(255,255,255,.95);
    --highlight-soft: rgba(255,255,255,.35);

    --shadow-color: rgba(0,0,0,.22);
    --shadow-light: rgba(255,255,255,.6);

    --edge-color:
        rgba(255,255,255,.35);
}


/* ===== Pastel ===== */
#keyring-box.pastel,
.design-preview.pastel{
    background:
        linear-gradient(135deg,
        #ffd6e8 0%,
        #ffeec5 35%,
        #d8f8ff 70%,
        #e8d8ff 100%);

    border:4px solid rgba(255,255,255,.95);

    --design-shadow:
        0 15px 30px rgba(255,160,210,.35),
        inset 0 4px 10px rgba(255,255,255,.8),
        inset 0 -6px 12px rgba(180,140,180,.18);

    --highlight-color: rgba(255,240,250,.95);
    --highlight-soft: rgba(255,220,240,.45);

    --shadow-color: rgba(220,150,190,.28);
    --shadow-light: rgba(255,255,255,.75);
}


/* ===== Neon ===== */

#keyring-box.neon,
.design-preview.neon{
    background:
        radial-gradient(circle,#222 0%,#111 100%);

    border:3px solid #00f5ff;

    --design-shadow:
        0 0 8px #00f5ff,
        0 0 22px rgba(0,245,255,.9),
        0 0 45px rgba(0,245,255,.5),
        inset 0 0 20px rgba(0,245,255,.35);

    --highlight-color: rgba(0,255,255,.95);
    --highlight-soft: rgba(0,200,255,.45);

    --shadow-color: rgba(0,255,255,.45);
    --shadow-light: rgba(255,255,255,.3);
}


/* ===== Wood ===== */

#keyring-box.wood,
.design-preview.wood{
    background:
        repeating-linear-gradient(
            90deg,
            #d49b61 0px,
            #c98d53 7px,
            #b87740 14px,
            #a96837 20px
        );

    border:5px solid #6b4226;

    --design-shadow:
        0 15px 25px rgba(80,45,20,.35),
        inset 0 4px 8px rgba(255,255,255,.25),
        inset 0 -8px 15px rgba(50,20,0,.25);

    --highlight-color: rgba(255,220,160,.8);
    --highlight-soft: rgba(255,190,120,.3);

    --shadow-color: rgba(80,40,10,.45);
    --shadow-light: rgba(255,240,200,.35);
}


/* ===== Metal ===== */

#keyring-box.metal,
.design-preview.metal{
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #e8e8e8 20%,
            #c9c9c9 45%,
            #fdfdfd 70%,
            #bcbcbc 100%
        );

    border:3px solid #8a8a8a;

    --design-shadow:
        0 15px 30px rgba(0,0,0,.35),
        inset 0 5px 10px rgba(255,255,255,.9),
        inset 0 -8px 12px rgba(0,0,0,.25);

    --highlight-color: rgba(255,255,255,.95);
    --highlight-soft: rgba(220,230,255,.5);

    --shadow-color: rgba(0,0,0,.35);
    --shadow-light: rgba(255,255,255,.9);

    --edge-color:
        rgba(0,0,0,.35);
}

/* 형태 */
.shape-bear {
    clip-path: url(#bear-clip);
}

.shape-cloud {
    clip-path: url(#cloud-clip);
}

.shape-default {
    clip-path: none;
    border-radius: 50%;
}

.design-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
    gap:16px;
    margin-top:20px;
}

.design-card{
    cursor:pointer;
    text-align:center;
}

.design-preview{
    background-color: #ddd;
    width:72px;
    height:72px;

    border-radius:50%;

    margin:0 auto 10px;

    transition:.2s;
    overflow: hidden;  
    position:relative;
}

.design-preview:hover{
    transform:scale(1.08);
}

.design-card:hover .design-preview{
    transform:scale(1.08);
}

.design-card.selected .design-preview{
    outline:4px solid #4f8cff;
    outline-offset:4px;
}

#keyring-side{

    position:absolute;

    inset:0;

    border-radius:inherit;

    pointer-events:none;

    z-index:3;

    opacity:.8;

    background: inherit;
    filter: brightness(0.7);
    scale: 1.05;
}

#keyring-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 35% 30%, 
        rgba(255,255,255,0.8) 0%, 
        rgba(255,255,255,0.3) 30%,
        rgba(255, 255, 255, 0) 60%);
    z-index: 2;
    pointer-events: none;
    transition: background 0.1s ease-out;
}

#world {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 4;
    opacity: 0.85;
    filter: brightness(1.1) contrast(1.1);
    pointer-events: auto;
}

#keyring-box canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: auto;
    z-index:1;
}

.input-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.input-group input {
    flex: 1 1 80px;
    padding: 12px;
    border: none;
    border-radius: 15px;
    background: rgba(255,255,255,0.8);
}

.input-group button {
    flex: 0 0 80px;
    background: #6a6a9d;
    color: white;
    border-radius: 15px;
    font-weight: bold;
}

canvas { 
    background: transparent !important; 
}

.controls {
    margin-top: 30px; display: flex; gap: 10px;
    background: rgba(255, 255, 255, 0.5);
    padding: 15px; border-radius: 20px;
    backdrop-filter: blur(10px);
}

/* 하단 고정 컨테이너 */
.input-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.7);
    padding: 15px;
    border-radius: 25px;
    backdrop-filter: blur(20px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 100;
}

.input-row {
    display: flex;
    gap: 8px;
}

/* 입력 */
input {
    border: 1px solid rgba(0,0,0,0.05);
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    outline: none;
}

#itemName { flex: 2; } /* 이름은 좀 더 넓게 */
#itemPrice { flex: 1.5; }
#emojiInput { flex: 1; text-align: center; }

button {
    background: #6a6a9d;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 12px;
    font-weight: bold;
}