@font-face{font-family:Meiryo;src:url('../../fonts/meiryo.ttc')}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Meiryo,'メイリオ',sans-serif;color:#315b48;background:#fbfdfa}button,input,select{font-family:inherit}.island-shell{padding:10px 18px 100px}.island-tab-radio{position:absolute;opacity:0;pointer-events:none}.island-tabs{display:flex;gap:6px;border:1px solid #d5e4dc;background:#edf5ef;border-radius:14px;padding:5px;position:sticky;top:0;z-index:4}.island-tabs label{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;min-height:42px;height:auto;line-height:1.8;font-size:12px;white-space:normal;cursor:pointer;border-radius:10px;padding:7px;color:#7a9583}.island-pane{display:none}.island-shell:has(#tab-background-motion:checked) .pane-background-motion,.island-shell:has(#tab-background-image:checked) .pane-background-image,.island-shell:has(#tab-cover:checked) .pane-cover,.island-shell:has(#tab-cover-motion:checked) .pane-cover-motion,.island-shell:has(#tab-logo-human:checked) .pane-logo-human,.island-shell:has(#tab-logo-animal:checked) .pane-logo-animal,.island-shell:has(#tab-logo-icon:checked) .pane-logo-icon{display:block}.island-shell:has(#tab-background-motion:checked) label[for=tab-background-motion],.island-shell:has(#tab-background-image:checked) label[for=tab-background-image],.island-shell:has(#tab-cover:checked) label[for=tab-cover],.island-shell:has(#tab-cover-motion:checked) label[for=tab-cover-motion],.island-shell:has(#tab-logo-human:checked) label[for=tab-logo-human],.island-shell:has(#tab-logo-animal:checked) label[for=tab-logo-animal],.island-shell:has(#tab-logo-icon:checked) label[for=tab-logo-icon]{background:#fff;color:#286849;box-shadow:0 2px 8px #315f4110;font-weight:bold}.island-upload{display:flex;gap:9px;margin:18px 0 0;align-items:stretch}.island-upload>label{flex:1;min-width:0;border:1px dashed #a8c6b3;border-radius:12px;padding:11px 12px;background:#f2faf3;font-size:11px;line-height:1.9;cursor:pointer}.island-upload input{display:block;width:100%;max-width:100%;font-size:10px;margin-top:5px;color:#71917c}.island-upload input::file-selector-button{border:1px solid #bcd6c7;border-radius:8px;background:#e7f4e9;color:#3b7754;padding:6px 8px;font-family:inherit}.island-button{display:flex;align-items:center;justify-content:center;text-align:center;padding:11px 17px;min-height:44px;height:auto;line-height:1.9;font-size:12px;font-weight:bold;border:1px solid #327653;border-radius:12px;color:#fff;background:linear-gradient(110deg,#287b55,#4b9b74);white-space:normal;overflow-wrap:anywhere;max-width:100%;cursor:pointer;animation:island-cta 3s ease-in-out infinite}.island-hint{font-size:10px;line-height:1.9;color:#8b9e8f;margin:8px 0 15px}.island-gallery{padding:8px;margin-top:16px}.island-choice{display:flex;flex-direction:column;align-items:center;position:relative;border:2px solid #dce6df;padding:6px;background:white;border-radius:14px;min-width:0;cursor:pointer;scroll-snap-align:start}.island-choice input{position:absolute;top:10px;left:10px;width:16px;height:16px;accent-color:#3d9165;margin:0;z-index:1}.island-choice picture{display:block;width:100%}.island-choice img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:9px}.pane-cover .island-choice img{aspect-ratio:16/6}.island-choice>span{font-size:10px;line-height:1.8;text-align:center;white-space:normal;overflow-wrap:anywhere;margin-top:7px;max-width:100%;color:#7a9283}.island-choice i{display:none;position:absolute;top:8px;right:8px;width:22px;height:22px;background:#3d9465;color:#fff;border:2px solid white;border-radius:50%;align-items:center;justify-content:center;font-size:11px;font-style:normal}.island-choice:has(input:checked){border-color:#358a5a;animation:island-ring 2s ease-in-out infinite}.island-choice:has(input:checked) i{display:flex}.island-choice:has(input:checked)>span{color:#2d794e;font-weight:bold}.island-choice:focus-within{outline:3px solid #b1d7be;outline-offset:2px}.avatar-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}.avatar-grid img{aspect-ratio:1;border-radius:11px}.island-footer{position:fixed;left:0;right:0;bottom:0;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #d7e6dd;background:#ffffffed;backdrop-filter:blur(16px);box-shadow:0 -5px 15px #3a745c09}.island-footer>span{font-size:11px;line-height:1.8;color:#739680;flex:1}.island-footer form{margin:0}.island-enabled,.island-selected{display:none}.island-disabled{background:#e9ede9;color:#9aa69e;border-color:#dae1db;cursor:not-allowed;animation:none;box-shadow:none}.island-shell:has(#tab-background-motion:checked):has(.pane-background-motion input[name=choice]:checked) .island-enabled,.island-shell:has(#tab-background-image:checked):has(.pane-background-image input[name=choice]:checked) .island-enabled,.island-shell:has(#tab-cover:checked):has(.pane-cover input[name=choice]:checked) .island-enabled,.island-shell:has(#tab-cover-motion:checked):has(.pane-cover-motion input[name=choice]:checked) .island-enabled,.island-shell:has(#tab-logo-human:checked):has(.pane-logo-human input[name=choice]:checked) .island-enabled,.island-shell:has(#tab-logo-animal:checked):has(.pane-logo-animal input[name=choice]:checked) .island-enabled,.island-shell:has(#tab-logo-icon:checked):has(.pane-logo-icon input[name=choice]:checked) .island-enabled{display:flex}
/* Switch only the visual disabled/enabled controls for the visible tab. No JS data handling. */
.island-shell:has(#tab-background-motion:checked):has(.pane-background-motion input[name=choice]:checked) .island-disabled,.island-shell:has(#tab-background-image:checked):has(.pane-background-image input[name=choice]:checked) .island-disabled,.island-shell:has(#tab-cover:checked):has(.pane-cover input[name=choice]:checked) .island-disabled,.island-shell:has(#tab-cover-motion:checked):has(.pane-cover-motion input[name=choice]:checked) .island-disabled,.island-shell:has(#tab-logo-human:checked):has(.pane-logo-human input[name=choice]:checked) .island-disabled,.island-shell:has(#tab-logo-animal:checked):has(.pane-logo-animal input[name=choice]:checked) .island-disabled,.island-shell:has(#tab-logo-icon:checked):has(.pane-logo-icon input[name=choice]:checked) .island-disabled{display:none}.island-footer:has(.island-enabled){min-height:72px}.island-crop{padding:12px;background:#f3f8f2;border:1px solid #d5e4d6;border-radius:13px;margin-top:12px}.island-crop summary{font-size:11px;line-height:1.8;color:#5c8165;cursor:pointer;font-weight:bold}.crop-preview{display:block;max-width:100%;max-height:180px;margin:10px auto;object-fit:contain;border-radius:10px}.crop-logo{border-radius:50%;width:120px;aspect-ratio:1}.island-crop form{display:grid;grid-template-columns:1fr 1fr;gap:10px}.island-crop label{font-size:10px;display:flex;flex-direction:column;gap:8px;line-height:1.9;color:#789981;min-width:0}.island-crop input,.island-crop select{width:100%;accent-color:#448c63}.island-crop select{min-height:36px;border:1px solid #c5ddcb;border-radius:9px;background:white;color:#467157;padding:6px;font-size:11px}.island-notice,.island-error{padding:12px 14px;border-radius:13px;font-size:11px;line-height:1.9;margin-bottom:12px;border:1px solid #bddac7;background:#edf8ef;color:#508163}.island-error{background:#fff1eb;border-color:#e4beb1;color:#9d6251}@keyframes island-ring{0%,100%{box-shadow:0 0 0 2px #358a5a15}50%{box-shadow:0 0 0 4px #358a5a40}}@keyframes island-cta{0%,100%{box-shadow:0 3px 8px #458f6520}50%{box-shadow:0 5px 14px #458f6540;transform:translateY(-1px)}}@media(max-width:600px){.island-shell{padding:8px 9px 110px}.island-gallery{padding:5px}.island-choice{padding:4px;border-radius:11px}.island-choice>span{font-size:8px}.island-choice input{width:12px;height:12px;top:7px;left:7px}.island-choice i{width:17px;height:17px;font-size:8px;top:6px;right:6px}.avatar-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.island-upload{flex-wrap:wrap}.island-upload>label{flex-basis:100%}.island-upload>button{width:100%}.island-footer{padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px}.island-footer>span{font-size:9px}.island-footer .island-button{font-size:11px;padding:10px 15px}.island-tabs label{font-size:11px}}@media(prefers-reduced-motion:reduce){.island-choice:has(input:checked),.island-button{animation:none}}

.island-shell:has(#tab-background-motion:checked):has(.pane-background-motion input[name=choice]:checked) .island-unselected,.island-shell:has(#tab-background-image:checked):has(.pane-background-image input[name=choice]:checked) .island-unselected,.island-shell:has(#tab-cover:checked):has(.pane-cover input[name=choice]:checked) .island-unselected,.island-shell:has(#tab-cover-motion:checked):has(.pane-cover-motion input[name=choice]:checked) .island-unselected,.island-shell:has(#tab-logo-human:checked):has(.pane-logo-human input[name=choice]:checked) .island-unselected,.island-shell:has(#tab-logo-animal:checked):has(.pane-logo-animal input[name=choice]:checked) .island-unselected,.island-shell:has(#tab-logo-icon:checked):has(.pane-logo-icon input[name=choice]:checked) .island-unselected{display:none}
.island-shell:has(#tab-background-motion:checked):has(.pane-background-motion input[name=choice]:checked) .island-selected,.island-shell:has(#tab-background-image:checked):has(.pane-background-image input[name=choice]:checked) .island-selected,.island-shell:has(#tab-cover:checked):has(.pane-cover input[name=choice]:checked) .island-selected,.island-shell:has(#tab-cover-motion:checked):has(.pane-cover-motion input[name=choice]:checked) .island-selected,.island-shell:has(#tab-logo-human:checked):has(.pane-logo-human input[name=choice]:checked) .island-selected,.island-shell:has(#tab-logo-animal:checked):has(.pane-logo-animal input[name=choice]:checked) .island-selected,.island-shell:has(#tab-logo-icon:checked):has(.pane-logo-icon input[name=choice]:checked) .island-selected{display:block}

/* Twelve choices at a time: three columns, four rows, no horizontal carousel. */
.island-gallery-batch{display:grid;gap:12px;align-items:stretch}
.three-column-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
.island-more{margin-top:16px}
.island-more>summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;height:auto;width:100%;padding:11px 16px;border:1px solid #c5dccd;border-radius:12px;background:linear-gradient(110deg,#edf6ef,#f8faf6);color:#44765a;font-size:12px;font-weight:700;line-height:1.8;text-align:center;white-space:normal;overflow-wrap:anywhere;cursor:pointer;transition:background .2s,border-color .2s}
.island-more>summary::-webkit-details-marker{display:none}
.island-more>summary:hover{background:#e7f2e9;border-color:#98bfa5}
.island-more>summary:focus-visible{outline:3px solid #acd0b8;outline-offset:3px}
.island-more[open]>summary{display:none}
.island-more-icon{font-size:17px;line-height:1}
@media(max-width:600px){.island-gallery-batch{gap:8px}.island-more>summary{font-size:11px;padding:10px 12px}.island-choice>span{font-size:9px;line-height:1.8}}
@media(prefers-reduced-motion:reduce){.island-more>summary{transition:none}}

/* Fixed-ratio visual crop. The original pixels are processed only on PHP save. */
.island-crop-simple h2{margin:0;font-size:14px;line-height:1.9;color:#37694d}
.crop-viewport{position:relative;overflow:hidden;isolation:isolate;width:min(100%,360px);margin:15px auto;border:2px solid #5c9874;border-radius:13px;background:#edf3ed;box-shadow:0 3px 16px #356a4614}
.crop-viewport-background{aspect-ratio:9/16;width:min(100%,180px)}
.crop-viewport-cover{aspect-ratio:8/3}
.crop-viewport-logo{aspect-ratio:1;width:min(100%,240px)}
.crop-viewport>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--crop-x,50%) var(--crop-y,50%);transform:scale(var(--crop-zoom,1));transform-origin:var(--crop-x,50%) var(--crop-y,50%)}
.crop-guides{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent calc(33.333% - .5px),#ffffff65 calc(33.333% - .5px),#ffffff65 calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#ffffff65 calc(66.666% - .5px),#ffffff65 calc(66.666% + .5px),transparent calc(66.666% + .5px)),linear-gradient(to bottom,transparent calc(33.333% - .5px),#ffffff65 calc(33.333% - .5px),#ffffff65 calc(33.333% + .5px),transparent calc(33.333% + .5px),transparent calc(66.666% - .5px),#ffffff65 calc(66.666% - .5px),#ffffff65 calc(66.666% + .5px),transparent calc(66.666% + .5px))}
.island-crop-simple .crop-zoom-control{font-size:11px;color:#52775e}
.island-crop-simple input[type=range]{min-height:40px;margin:0;touch-action:pan-y;cursor:pointer}
.crop-position{border-top:1px solid #dbe7db;padding-top:9px;margin-top:9px}
.crop-position>summary{padding:6px 0;min-height:36px;line-height:1.9}
.crop-position-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:5px}
@media(max-width:600px){.island-crop-simple{padding:12px}.crop-viewport-background{width:min(100%,150px)}.island-crop-simple h2{font-size:13px}.crop-position-controls{gap:10px}}

.crop-viewport{box-sizing:content-box;max-width:calc(100% - 4px)}

/* Direct touch crop: fixed output ratio with visible corner framing. */
.crop-viewport{touch-action:none;cursor:grab;border:2px solid #fff;border-radius:4px;box-shadow:0 0 0 2px #47725e,0 8px 24px #244c3728;user-select:none;overflow:hidden}
.crop-viewport.is-dragging{cursor:grabbing}
.crop-viewport>img{pointer-events:none;user-select:none}
.crop-viewport-logo{border-radius:50%;box-shadow:0 0 0 2px #47725e,0 8px 24px #244c3728}
.crop-viewport-logo .crop-guides{border-radius:50%;border:2px solid #ffffffc9}
.crop-handle{position:absolute;width:24px;height:24px;border:0 solid #fff;z-index:3;touch-action:none;cursor:nwse-resize}
.handle-tl{top:0;left:0;border-top-width:4px;border-left-width:4px}.handle-tr{top:0;right:0;border-top-width:4px;border-right-width:4px;cursor:nesw-resize}.handle-bl{bottom:0;left:0;border-bottom-width:4px;border-left-width:4px;cursor:nesw-resize}.handle-br{bottom:0;right:0;border-bottom-width:4px;border-right-width:4px}
.crop-viewport-logo .crop-handle{display:none}
.crop-zoom-value{float:right;font-size:11px;color:#2f7452}
.crop-viewport:focus-visible{outline:3px solid #75a58a;outline-offset:5px}

.island-crop-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;flex-wrap:wrap;margin-bottom:10px}
.island-crop-heading h2{margin:0;min-width:0;line-height:1.7}
.island-crop-heading form{display:block;margin:0;margin-left:auto}
.island-delete-upload{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:36px;height:auto;padding:7px 12px;border:2px solid #db6666;border-radius:10px;background:#fff5f4;color:#ba4343;font:700 11px/1.7 Meiryo,'メイリオ',sans-serif;text-align:center;white-space:normal;overflow-wrap:anywhere;cursor:pointer;animation:bio-upload-delete-glow 1.8s ease-in-out infinite}
.island-delete-upload:focus-visible{outline:2px solid #de9292;outline-offset:3px}
@keyframes bio-upload-delete-glow{0%,100%{box-shadow:0 0 0 0 #d760601a;transform:translateY(0)}50%{box-shadow:0 0 0 3px #d760602e;transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.island-delete-upload{animation:none}}

.pane-cover .island-choice :is(img,picture),.pane-cover-motion .island-choice :is(img,picture){aspect-ratio:8/3;object-fit:cover;height:auto}