/* Personal theme and avatar studio, optimized for one-handed mobile use. */
/* Group cards keep a real full-card button separate from their other actions. */
.group-card{position:relative;border-top:3px solid var(--group-color,var(--line))}
.group-card-open{position:absolute;inset:0;z-index:1;border-radius:inherit}
.group-card-open:focus-visible{outline:3px solid var(--purple);outline-offset:-4px}
.group-card:has(.group-card-open:hover){box-shadow:0 5px 20px #57456c0c}
.group-card .group-character-button,.group-card-footer .small-button{position:relative;z-index:2}
.group-card .group-card-icon{background:var(--group-wash);color:var(--group-color)}
.group-members-hint{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--tone-8c749c,#8c749c);margin-top:13px}
.group-members-hint svg{width:14px;height:14px}
.group-info-description{font-size:13px;line-height:1.8;color:var(--tone-95829e,#95829e);overflow-wrap:anywhere}
.group-info-summary{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--tone-8c749c,#8c749c);margin-top:12px}
.group-info-color-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.group-info-section{margin-top:26px}
.group-info-section h3{font-size:13px;color:var(--tone-785d8b,#785d8b);font-weight:650}
.group-info-section h3>span{font-weight:500;margin-left:5px;font-size:11px;color:var(--tone-9a849f,#9a849f)}
.group-member-list{list-style:none;padding:0;margin:12px 0 0;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.group-member-list li{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line)}
.group-member-list li:last-child{border:0}
.group-member-list strong{font-size:12px;font-weight:600;overflow-wrap:anywhere;min-width:0}
.group-member-list .avatar{width:35px;height:35px;font-size:11px}
.group-member-badges{display:flex;gap:5px;flex-shrink:0;margin-left:auto}
.group-member-badges>span{font-size:9px;padding:4px 7px;border-radius:6px;white-space:nowrap}
.member-self-badge{background:var(--tone-f0eafa,#f0eafa);color:var(--tone-785d8b,#785d8b)}
.member-owner-badge{background:#fff4d8;color:#9a7b35}
.group-info-notice{font-size:10px;line-height:1.8;color:var(--tone-9a849f,#9a849f);margin-top:11px}
.group-info-section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.group-info-section-heading>span{font-size:10px;color:var(--tone-9a849f,#9a849f)}
.group-color-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px 7px;margin-top:15px}
.group-color-swatch{display:flex;flex-direction:column;align-items:center;gap:8px;border-radius:10px;padding:6px 2px;min-width:0}
.group-color-swatch>span{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid white;box-shadow:0 0 0 1px var(--line)}
.group-color-swatch svg{width:17px;height:17px;color:#fff;stroke-width:2.5}
.group-color-swatch small{font-size:10px;color:var(--tone-8c749c,#8c749c)}
.group-color-swatch[aria-pressed=true]>span{box-shadow:0 0 0 2px var(--purple)}
.group-color-swatch[aria-pressed=true] small{color:var(--ink);font-weight:650}
.group-dot.rose{background:#d697b0}.group-dot.butter{background:#d6ba6b}.group-dot.mint{background:#79bcb5}.group-dot.gray{background:#a8a3a0}
@media(max-width:420px){.group-member-list li{padding:11px}.group-color-swatches{gap:9px 4px}.group-color-swatch small{font-size:9px}#groupInfoDialog .dialog-actions .button{font-size:11px;padding:11px 9px}}
.kakao-label{background:#fff5bf;color:#9b853a}
.kakao-friend-button{border-color:#e6d38a;background:#fffbee;color:#887534}
.kakao-friend-button small{font-size:9px;background:#f7efce;color:#9e8c50;padding:3px 6px;border-radius:5px}
.kakao-flow-panel{background:#fffbee;border-color:#f0e6c3}
.kakao-flow-panel>strong{font-size:12px;color:#8b7437}
.kakao-flow-panel>p{font-size:11px;line-height:1.9;color:#a18c51;margin-top:9px}
.kakao-flow-panel .section-help{margin-bottom:0}
.kakao-recipient-hint{display:inline-flex;align-items:center;gap:7px;color:#99813f;background:#fff9dd;padding:9px 12px;border-radius:9px;font-size:11px}
.kakao-recipient-hint .kakao-bubble{width:14px;height:12px;background:#8e783d}
.kakao-recipient-hint .kakao-bubble:after{background:#8e783d}
.kakao-share-pending{background:#fee500;color:#594b00;width:100%;margin-top:15px;opacity:.7!important;font-size:12px;min-height:46px}
.event-friends-section{margin-top:22px}
.event-friends-section .selected-friends{margin:12px 0;gap:8px}
.event-friends-empty{font-size:11px;line-height:1.8;color:var(--tone-9a849f,#9a849f);margin:0 0 12px}
.event-friends-section .friend-add-button{width:100%;justify-content:center;min-height:44px}
.primary,.day-cell.selected .date-number,.character-selection-check{color:var(--on-accent,#fff)}
.primary:hover{background:var(--chosen-accent-hover,var(--purple))}
.mobile-nav{padding-left:12px;padding-right:12px}
.mobile-nav button{min-width:0;flex:1;padding:0 3px}
.hero-owner-art{position:absolute;left:0;bottom:11px;width:158px;height:158px;z-index:1;display:flex;align-items:center;justify-content:center}
.hero-owner-art>img,.hero-owner-art>svg{position:static!important;width:100%!important;height:100%!important;object-fit:contain;flex-shrink:0}
.hero-owner:hover .hero-owner-art>svg{transform:translateY(-3px) rotate(-2deg)}
.group-character-button>svg{width:72px;height:72px}
.character-option-card>svg{width:100%;height:136px}
.compact .character-option-card>svg{height:88px}
.customize-character-link{display:flex;align-items:center;gap:8px;width:100%;background:var(--tone-f0eafa,#f0eafa);border:1px solid var(--tone-e6daf2,#e6daf2);border-radius:12px;color:var(--tone-785d8b,#785d8b);padding:13px;margin:0 0 19px;text-align:left;font-size:12px;min-height:46px}
.customize-character-link [data-icon]:last-child{margin-left:auto}
.customize-character-link svg{height:17px;width:17px}
.settings-card{padding:23px 21px;margin-bottom:18px;border-radius:19px}
.settings-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.settings-heading h2{font-size:19px;letter-spacing:-.7px;line-height:1.5;margin-top:5px}
.settings-heading .section-label{font-size:8px;letter-spacing:1.3px;color:var(--tone-9a8aac,#9a8aac)}
.settings-deco{font-size:34px;font-weight:400;color:var(--tone-b8a5df,#b8a5df)}
.settings-copy{font-size:12px;line-height:1.8;color:var(--tone-95829e,#95829e);margin-top:9px}
.theme-presets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:21px}
.theme-preset{display:flex;align-items:center;flex-direction:column;gap:8px;padding:3px 0 7px;border-radius:12px;min-width:0}
.theme-preset>span{display:flex;align-items:center;justify-content:center;width:39px;height:39px;border:4px solid white;border-radius:50%;box-shadow:0 0 0 1px var(--line)}
.theme-preset i{font-style:normal;font-size:15px;color:#fff;text-shadow:0 1px 3px #0005}
.theme-preset small{font-size:10px;color:var(--tone-8c749c,#8c749c)}
.theme-preset[aria-pressed=true]>span{box-shadow:0 0 0 2px var(--purple)}
.theme-preset[aria-pressed=true] small{color:var(--ink);font-weight:650}
.custom-color-row{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);border-radius:13px;padding:13px 14px;margin-top:15px;background:var(--tone-fcfbfe,#fcfbfe)}
.custom-color-row label{margin:0;display:flex;flex-direction:column;gap:7px;cursor:pointer}
.custom-color-row strong{font-size:12px;font-weight:600;color:var(--tone-785d8b,#785d8b)}
.custom-color-row small{font-size:11px;font-weight:400;color:var(--tone-a28cae,#a28cae);letter-spacing:.5px}
input[type=color]{width:48px;height:43px;border:1px solid var(--tone-e5daef,#e5daef);padding:3px;background:white;border-radius:10px;cursor:pointer;flex-shrink:0}
input[type=color]::-webkit-color-swatch-wrapper{padding:0}
input[type=color]::-webkit-color-swatch{border:0;border-radius:7px}
input[type=color]::-moz-color-swatch{border:0;border-radius:7px}
.settings-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;color:var(--tone-aa94b6,#aa94b6);font-size:10px;line-height:1.8}
.settings-caption button{font-size:10px;color:var(--tone-8e72bd,#8e72bd);text-decoration:underline;text-underline-offset:3px;min-height:30px;white-space:nowrap}
.mini-group-pill{font-size:10px;color:var(--tone-8a6ab4,#8a6ab4);background:var(--tone-f0eafa,#f0eafa);padding:7px 9px;border-radius:8px;max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar-studio-preview{margin:19px 0 17px;position:relative;border:1px solid var(--tone-e9e2f4,#e9e2f4);border-radius:17px;background:var(--tone-f1edfa,#f1edfa);height:257px;overflow:hidden;display:flex;align-items:flex-start;justify-content:center}
#avatarStudioPreview{position:relative;z-index:1;width:216px;height:224px;display:flex;align-items:center;justify-content:center;padding-top:9px}
#avatarStudioPreview>img{height:214px;width:214px;object-fit:contain}
#avatarStudioPreview>svg{width:214px;height:214px;flex-shrink:0}
.brand-mark.brand-image{display:block;object-fit:cover;transform:none;border-radius:12px;background:transparent}
.brand-mark.small.brand-image{border-radius:11px}
.studio-name{position:absolute;bottom:13px;font-size:10px;color:var(--tone-86679d,#86679d);padding:6px 12px;border:1px solid var(--tone-e3d9f1,#e3d9f1);border-radius:20px;background:#ffffffd9;max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-spark{position:absolute;color:var(--tone-baa1d4,#baa1d4);font-size:29px;line-height:1}
.studio-spark.one{left:35px;top:51px;transform:rotate(-15deg)}
.studio-spark.two{right:30px;bottom:61px;font-size:23px;transform:rotate(9deg)}
.studio-tabs{display:flex;background:var(--tone-f0edf8,#f0edf8);border:1px solid var(--tone-e9e2f4,#e9e2f4);padding:4px;gap:4px;border-radius:12px;margin-bottom:20px}
.studio-tabs button{flex:1;min-height:41px;font-size:12px;color:var(--tone-9b85a9,#9b85a9);border-radius:9px}
.studio-tabs button[aria-pressed=true]{background:white;color:var(--tone-785d8b,#785d8b);box-shadow:0 2px 5px #00000006;font-weight:650}
.studio-control{margin-top:21px}
.studio-control h3{font-size:12px;font-weight:650;color:var(--tone-7c638c,#7c638c);margin-bottom:11px}
.studio-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.studio-options.studio-gender{grid-template-columns:repeat(2,minmax(0,1fr))}
.studio-options button{min-width:0;min-height:44px;font-size:11px;border:1px solid var(--tone-e8e0ef,#e8e0ef);border-radius:10px;color:var(--tone-9a849f,#9a849f);background:#fff;padding:9px 5px}
.studio-option-count{margin-left:5px;font-size:10px;font-weight:500;color:var(--tone-9a849f,#9a849f)}
.studio-option-hint{margin-top:9px;font-size:10px;line-height:1.6;color:var(--tone-9a849f,#9a849f)}
.studio-options button[aria-pressed=true]{border-color:var(--tone-a28ad4,#a28ad4);background:var(--tone-f0eafa,#f0eafa);color:var(--tone-785d8b,#785d8b);font-weight:650}
.studio-colors{display:flex;gap:13px;flex-wrap:wrap}
#hairColorChoices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px 7px}
.studio-color{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:48px;padding:4px 2px;border-radius:9px}
.studio-color>span{width:35px;height:35px;display:block;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px var(--tone-e5daef,#e5daef)}
.studio-color[aria-pressed=true]>span{box-shadow:0 0 0 2px var(--purple)}
.studio-color small{font-size:10px;color:var(--tone-9a849f,#9a849f)}
.studio-color[aria-pressed=true] small{color:var(--ink);font-weight:600}
.outfit-color-control{display:flex;align-items:center;gap:12px}
.outfit-color-control h3{margin:0;margin-right:auto}
.outfit-color-control>span{font-size:10px;color:var(--tone-a28cae,#a28cae);letter-spacing:.4px}
.studio-save-hint{font-size:10px;color:var(--tone-aa94b6,#aa94b6);line-height:1.85;margin:25px 0 12px;text-align:center}
.studio-save{width:100%;font-size:13px;min-height:47px;border-radius:12px}
@media(max-width:420px){.hero-owner-art{width:149px;height:153px}.settings-card{padding:22px 18px}.theme-presets{gap:3px}.theme-preset>span{width:35px;height:35px}.theme-preset small{font-size:9px}.compact .character-option-card>svg{height:76px}.studio-colors{gap:10px}.settings-heading h2{font-size:18px}.mini-group-pill{max-width:102px;font-size:9px}.studio-spark.one{left:20px}.studio-spark.two{right:20px}}
@media(max-width:350px){.hero-owner-art{width:136px;height:153px}.settings-card{padding:20px 15px}.theme-preset>span{width:31px;height:31px;border-width:3px}.theme-preset small{font-size:8px}.settings-caption{font-size:9px}.studio-options{gap:5px}.studio-options button{font-size:10px;min-width:54px}.studio-colors{gap:7px}.studio-color{min-width:43px}.compact .character-option-card>svg{height:100px}.custom-color-row{padding:12px}.custom-color-row strong{font-size:11px}}