.storybook-preview-section{padding:24px 16px 48px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.storybook-preview-wrapper{max-width:480px;margin:0 auto;background:#fff;border-radius:24px;padding:30px 16px;position:relative}.storybook-preview-header{text-align:center;margin-bottom:3.75vw}.storybook-title{font-size:4.8vw;font-weight:600;color:#333;margin:0;line-height:1.3;text-align:left}.storybook-preview-form{display:flex;flex-direction:column;gap:24px}.form-group{display:flex;flex-direction:column;gap:12px}.form-label{font-size:3.7333vw;font-weight:500;color:#333;display:flex;align-items:center;gap:4px;line-height:1;font-size:4.8vw}.required-mark{color:#f89048;font-size:3.7333vw}.select-wrapper{position:relative}.form-select{width:100%;padding:2px 50px 2px 20px;border:2px solid #FFCB643D;border-radius:8px;font-size:16px;color:#666;background:#ffcb643d;-webkit-appearance:none;appearance:none;cursor:pointer;transition:all .3s ease}.form-select:focus{outline:none;border-color:#ffcb64}.select-arrow{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:#999;pointer-events:none;transition:transform .3s ease}.form-select:focus+.select-arrow{transform:translateY(-50%) rotate(180deg)}@media (max-width: 768px){.form-group.gender-group{flex-direction:row;justify-content:space-between}}.form-group.gender-group{padding-bottom:24px;border-bottom:2px dashed #FFCB643D}.gender-options{display:grid;grid-template-columns:1fr 1fr;gap:24px}.gender-option{cursor:pointer}.gender-option input[type=radio]{display:none}.gender-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;border:none;border-radius:12px;background:transparent;transition:all .3s ease;text-align:center;position:relative}.gender-card:after{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:61px;height:61px;border:3px solid transparent;border-radius:50%;transition:all .3s ease;pointer-events:none;z-index:1}.gender-option input[type=radio]:checked+.gender-card:after,.gender-card.selected:after{border-color:#ffcb64;box-shadow:0 0 0 2px #ffcb6433}.gender-card:before{content:"";position:absolute;top:5px;right:calc(50% - 24px);width:16px;transform:translate(50%);height:16px;transition:all .3s ease;opacity:0;z-index:4}.gender-option input[type=radio]:checked+.gender-card:before,.gender-card.selected:before{background-image:url(/cdn/shop/files/1x.png?v=1757988323);background-size:cover;background-position:center;background-repeat:no-repeat;opacity:1}.gender-option input[type=radio]:checked+.gender-card,.gender-card.selected{transform:translateY(-2px)}.gender-icon{width:58px;height:58px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}.avatar-svg{width:58px;height:58px;transition:all .3s ease}.gender-option input[type=radio]:checked+.gender-card .avatar-svg,.gender-card.selected .avatar-svg{filter:drop-shadow(0 4px 8px rgba(255,203,100,.3))}.gender-text{font-size:14px;font-weight:500;color:#333;margin:0}@media (max-width: 768px){.form-group.upload-group{display:flex;flex-direction:column;gap:12px}.upload-requirements{padding:0 12px;margin-bottom:0}.storybook_showin_area_text_title{font-size:14px;margin-bottom:10px}.storybook_showin_area_text_content{font-size:12px}.storybook_showin_area_text_content li span{margin-right:5px}}.upload-requirements{display:flex;justify-content:space-between;flex-direction:row;gap:8px;margin-bottom:16px}.requirement-item{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:8px;font-size:3vw;text-align:center;color:#666}.requirement-icon{flex-shrink:0}.upload-area{display:flex;gap:16px;justify-content:center}.upload-slot{width:100%;max-width:208px;aspect-ratio:1;border-radius:12px;overflow:hidden;position:relative;border:2px dashed #FFCB643D;background:#ffcb640d;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.upload-slot:hover{border-color:#ffcb64;background:#ffcb641a}.upload-slot.has-image{border:2px solid #FFCB64;background:#fff;box-shadow:0 2px 8px #ffcb6433}.upload-slot.has-image:hover{transform:scale(1.02)}.upload-content{display:flex;flex-direction:column;align-items:center;gap:8px;color:#ffcb64;font-weight:500;text-align:center}.uploaded-image{width:100%;height:100%;object-fit:cover;display:none;cursor:pointer}.file-input{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.upload-button{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;color:#ffcb64;font-weight:500}.upload-icon{width:32px;height:32px}.upload-text{font-size:14px}.upload-button.file-selected{background:#ffcb641a;border:2px solid #FFCB64;border-radius:16px;color:#ffcb64}.upload-button.file-selected .upload-icon{color:#ffcb64}.upload-button.file-selected .upload-text{color:#ffcb64;font-weight:600}.form-input{width:100%;padding:4px 20px;border:2px solid #FFCB643D;border-radius:8px;font-size:16px;color:#333;background:#fff;transition:all .3s ease}.form-input::placeholder{color:#999}.form-input:focus{outline:none;border-color:#ffcb64;box-shadow:0 0 0 4px #ffcb641a}.submit-area{display:flex;align-items:center;gap:16px;flex-wrap:wrap}@media (max-width: 480px){.submit-area{flex-direction:column;align-items:stretch;gap:12px}.submit-button{width:100%;min-width:auto}.form-message{text-align:right;min-width:auto}}.form-message{font-size:16px;display:none;flex:1;min-width:200px;width:100%;text-align:right}.error-message{color:#ff964f}.success-message{background:#2ecc711a;color:#2ecc71;border:1px solid rgba(46,204,113,.2)}.submit-button{flex-shrink:0;padding:9px 24px;background:#ffcb64;color:#000;border:none;border-radius:8px;font-size:13px;font-weight:lighter;cursor:pointer;transition:all .3s ease;letter-spacing:.5px;height:42px;min-width:200px;font-weight:500;font-family:unset!important}.submit-button:hover{background:#f5b942;transform:translateY(-2px);box-shadow:0 8px 24px #ffcb644d}.submit-button:active{transform:translateY(0)}.reupload-link{text-align:center}.reupload-link a{color:#666;font-size:.83333vw;text-decoration:none;transition:color .3s ease}.reupload-link a:hover{color:#ffcb64}@media (min-width: 768px){.storybook-title{font-size:1.25vw}.storybook-preview-form{gap:3.75vw}.form-group{gap:16px}.form-group.role-group,.form-group.gender-group{display:grid;grid-template-columns:143px 1fr;align-items:start;gap:24px}.form-label{padding-top:0;font-size:.9375vw}.gender-options{max-width:300px}.upload-group{display:grid;grid-template-columns:143px 1fr;align-items:start;gap:24px;row-gap:1.25vw}.upload-content{display:flex;flex-direction:column;gap:16px}.upload-requirements{grid-template-columns:repeat(4,1fr);gap:.83333vw;margin-bottom:2.5vw}.requirement-item{flex-direction:column;text-align:center;gap:12px}.requirement-icon{width:40px;height:40px}.upload-area{width:100%}.upload-slot{max-width:208px}.storybook_showin_area_text_title{font-size:1.2vw;margin-bottom:10px}.storybook_showin_area_text_content{font-size:1.15vw}.storybook_showin_area_text_content li span{margin-right:5px}}.storybook_showin_area_text{display:none}.storybook_showin_area_text.show{display:block}.storybook_showing_area{margin-top:48px;display:flex;flex-direction:column;gap:24px}.storybook_showin_area_prompt{display:flex;gap:12px;justify-content:space-around}.storybook_showing_area_title{font-size:4.8vw;font-family:var(--font-family-2)}.storybook_showin_area_prompt .storybook_showin_area_prompt_item{display:flex;flex-direction:column;gap:4px;font-size:12px;justify-content:center;align-items:center}.storybook_showin_area_result{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 12px}.storybook_showin_area_result .storybook_showin_area_result_item{background-color:#fff;padding:8px;border-radius:12px}.storybook_showin_area_result .storybook_showin_area_result_item img{border-radius:12px;width:100%}.storybook_showin_area_prompt .storybook_showin_area_prompt_item .ssapi_icon{width:33px;height:32px}.gender-group.child .gender-parent-text{display:none}.gender-group.child .gender-child-text,.gender-group.parent .gender-parent-text{display:inline-block}.gender-group.parent .gender-child-text{display:none}@media (max-width: 768px){.reupload-link a{font-size:3.2vw}.requirement-icon{width:24px;height:24px}.storybook_showing_area{margin-top:48px;display:none!important;flex-direction:column;gap:24px}.storybook_showing_area.show{display:flex!important}}.storybook-title{font-family:var(--font-family-2)}@media (min-width: 1024px){.storybook-title{font-size:1.25vw}.upload-requirements{display:grid;grid-template-columns:repeat(4,1fr)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.storybook-preview-wrapper{animation:fadeInUp .6s ease-out}.form-group{animation:fadeInUp .6s ease-out;animation-fill-mode:both}.form-group:nth-child(1){animation-delay:.1s}.form-group:nth-child(2){animation-delay:.2s}.form-group:nth-child(3){animation-delay:.3s}.form-group:nth-child(4){animation-delay:.4s}.submit-button{animation:fadeInUp .6s ease-out .5s both}.reupload-link{animation:fadeInUp .6s ease-out .6s both}.form-input:focus,.gender-option:focus-within .gender-card{outline:2px solid #FFCB64;outline-offset:2px}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (min-width:768px){.storybook-preview-section{display:flex;max-width:100%;padding:0 8.3333vw;margin:40px auto 0;justify-content:space-between;gap:4.53125vw}.storybook-preview-section .container{width:100%;max-width:713px}.storybook-preview-section .storybook_showing_area{width:100%;max-width:800px}.storybook-preview-section .storybook-preview-wrapper{max-width:unset;width:100%;padding:0;padding-top:2.91666vw;background:transparent}.storybook-preview-section .storybook_showing_area{margin-top:0;padding:2.91666vw 4.5833333vw;border-radius:28px;background:#ffecc4;box-sizing:border-box;border:2px solid #F89048}.form-group.upload-group>*:nth-child(odd):last-child{grid-column:2 / 3}.upload-group .requirement-item{display:flex;align-items:center;flex-direction:column;justify-content:center;gap:8px;font-size:.75vw;color:#3d3d3d}.submit-area{display:flex;align-items:center;gap:10px;flex-direction:column;width:100%;padding-left:143px}.submit-area .submit-button{width:100%;border-radius:12px;font-size:1.0416666vw;padding:1.119791666vw 0;height:unset}.required-mark{font-size:18px}.form-group.gender-group{padding-bottom:0;border-bottom:none}.avatar-svg{width:116px;height:116px}.gender-icon{width:116px;height:116px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}.gender-card:before{right:calc(50% - 44px);width:28px;height:28px}.gender-card:after{width:119px;height:119px}.storybook_showing_area_title{font-size:1.25vw}.storybook_showin_area_prompt .storybook_showin_area_prompt_item{font-size:1.15vw}.storybook_showing_area .storybook_showin_area_result .storybook_showin_area_result_item{background-color:#fff2d8;padding:16px}.storybook_showin_area_result{gap:24px}.upload-requirements{display:grid;grid-template-columns:repeat(4,1fr);padding:12px 0;background:#fff3da}.upload-slot .upload-text{display:none}.upload-content svg{width:64px;height:64px}.upload-area .upload-slot{border:2px dashed #ffcb64;background:#ffecc4}.storybook_showin_area_result .storybook_showin_area_result_item .show_mb{display:none}.storybook_showin_area_result .storybook_showin_area_result_item .show_pc{display:block}}.storybook_showin_area_result_item .show_mb{display:block}.storybook_showin_area_result_item .show_pc{display:none}.form-group.gender-group.parent .parent-avatar-svg,.form-group.gender-group.child .child-avatar-svg{display:block}.form-group.gender-group.parent .child-avatar-svg,.form-group.gender-group.child .parent-avatar-svg{display:none}
/*# sourceMappingURL=/cdn/shop/t/6/assets/storybook-preview.css.map */