:root {
            --page-bg: #090d16;
            --panel: rgba(20, 28, 44, .92);
            --panel-hover: rgba(27, 37, 57, .98);
            --line: rgba(255, 255, 255, .10);
            --line-strong: rgba(255, 255, 255, .17);
            --text: #f7f9ff;
            --muted: #9ca8bd;
            --accent: #ffcc4d;
            --accent-2: #ff8a5b;
            --gold: #f4ca64;
            --orange: #ffac70;
            --coral: #ff9588;
            --red: #ff8595;
            --rose: #f69cbc;
            --pink: #efa6df;
            --violet: #c1a7ff;
            --purple: #d3a1f5;
            --indigo: #a4b1ff;
            --blue: #89bdff;
            --sky: #85d4ff;
            --cyan: #79dce8;
            --teal: #77d6c5;
            --emerald: #79dba6;
            --green: #a4d884;
            --lime: #d0df86;
            --sand: #dfc79f;
            --slate: #b2c0d4;
        }

        * { box-sizing: border-box; }

        html { scroll-behavior: smooth; }

        body {
            min-height: 100vh;
            margin: 0;
            color: var(--text);
            background:
                radial-gradient(circle at 8% 0%, rgba(255, 176, 66, .14), transparent 28rem),
                radial-gradient(circle at 92% 9%, rgba(72, 137, 255, .12), transparent 30rem),
                radial-gradient(circle at 50% 100%, rgba(104, 221, 181, .06), transparent 32rem),
                var(--page-bg);
            font-family: Pretendard, "Noto Sans KR", Arial, sans-serif;
        }

        a { color: inherit; }

        .portal-page {
            width: min(1180px, calc(100% - 28px));
            margin: 0 auto;
            padding: 34px 0 54px;
        }

        .hero {
            position: relative;
            overflow: hidden;
            padding: 30px;
            border: 1px solid var(--line);
            border-radius: 24px;
            background: linear-gradient(135deg, rgba(31, 40, 60, .96), rgba(15, 21, 34, .96));
            box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
        }

        .hero::before,
        .hero::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        .hero::before {
            right: -72px;
            bottom: -132px;
            width: 350px;
            height: 350px;
            background: rgba(255, 198, 71, .09);
        }

        .hero::after {
            right: 170px;
            top: -105px;
            width: 230px;
            height: 230px;
            border: 1px solid rgba(127, 199, 255, .12);
        }

        .hero-copy { position: relative; z-index: 1; }

        .eyebrow {
            margin: 0 0 7px;
            color: var(--accent);
            font-size: 13px;
            font-weight: 850;
            letter-spacing: .16em;
        }

        h1 {
            margin: 0;
            font-size: clamp(30px, 5vw, 48px);
            letter-spacing: -.045em;
        }

        .hero-description {
            max-width: 580px;
            margin: 11px 0 0;
            color: var(--muted);
            line-height: 1.65;
        }

        .portal-groups {
            display: grid;
            gap: 11px;
            margin-top: 16px;
        }

        .section {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 19px;
            background: rgba(20, 28, 44, .72);
            box-shadow: 0 12px 34px rgba(0, 0, 0, .12);
        }

        .section[open] {
            background: rgba(20, 28, 44, .9);
            box-shadow: 0 18px 46px rgba(0, 0, 0, .2);
        }

        .portal-groups .section-heading {
            display: flex;
            align-items: center;
            gap: 14px;
            min-height: 72px;
            margin: 0;
            padding: 15px 18px;
            cursor: pointer;
            list-style: none;
            user-select: none;
            transition: background .16s ease;
        }

        .portal-groups .section-heading::-webkit-details-marker { display: none; }

        .portal-groups .section-heading:hover,
        .portal-groups .section-heading:focus-visible {
            background: rgba(255, 255, 255, .045);
            outline: none;
        }

        .group-icon {
            display: grid;
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            place-items: center;
            border-radius: 12px;
            color: var(--accent);
            background: rgba(255, 204, 77, .1);
            font-size: 20px;
        }

        .group-icon svg {
            width: 22px;
            height: 22px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.8;
        }

        .group-copy { min-width: 0; }

        .group-count {
            margin-left: auto;
            color: var(--muted);
            font-size: 12px;
            font-weight: 750;
            white-space: nowrap;
        }

        .portal-groups .section-heading::after {
            content: "+";
            display: grid;
            width: 29px;
            height: 29px;
            flex: 0 0 29px;
            place-items: center;
            border: 1px solid var(--line);
            border-radius: 9px;
            color: var(--muted);
            font-size: 20px;
            font-weight: 400;
            transition: transform .18s ease, color .18s ease;
        }

        .portal-groups .section[open] > .section-heading::after {
            content: "−";
            color: var(--accent);
            transform: rotate(180deg);
        }

        .portal-groups .section-heading h2 {
            margin: 0;
            font-size: 18px;
            letter-spacing: -.025em;
        }

        .portal-groups .section-heading p {
            margin: 3px 0 0;
            color: var(--muted);
            font-size: 13px;
        }

        .card-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            padding: 0 14px 14px;
            border-top: 1px solid rgba(255, 255, 255, .065);
        }

        .tool-card {
			margin-top : 15px;
            --card-color: var(--gold);
            position: relative;
            overflow: hidden;
            display: flex;
            min-height: 180px;
            padding: 21px;
            border: 1px solid var(--line);
            border-radius: 19px;
            background: linear-gradient(145deg, var(--panel), rgba(15, 21, 34, .96));
            box-shadow: 0 14px 38px rgba(0, 0, 0, .14);
            text-decoration: none;
            transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
        }

        .tool-card::after {
            content: "";
            position: absolute;
            right: -47px;
            bottom: -63px;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--card-color) 11%, transparent);
            transition: transform .2s ease;
        }

        .tool-card:hover,
        .tool-card:focus-visible {
            transform: translateY(-3px);
            border-color: color-mix(in srgb, var(--card-color) 44%, transparent);
            background: linear-gradient(145deg, var(--panel-hover), rgba(16, 23, 37, .98));
            box-shadow: 0 20px 48px rgba(0, 0, 0, .23);
            outline: none;
        }

        .tool-card:hover::after { transform: scale(1.14); }

        /* DB color_key options: gold, orange, coral, red, rose, pink, violet, purple, indigo, blue, sky, cyan, teal, emerald, green, lime, sand, slate. */
        .tool-card.gold { --card-color: var(--gold); }
        .tool-card.orange { --card-color: var(--orange); }
        .tool-card.coral { --card-color: var(--coral); }
        .tool-card.red { --card-color: var(--red); }
        .tool-card.rose { --card-color: var(--rose); }
        .tool-card.pink { --card-color: var(--pink); }
        .tool-card.violet { --card-color: var(--violet); }
        .tool-card.purple { --card-color: var(--purple); }
        .tool-card.indigo { --card-color: var(--indigo); }
        .tool-card.blue { --card-color: var(--blue); }
        .tool-card.sky { --card-color: var(--sky); }
        .tool-card.cyan { --card-color: var(--cyan); }
        .tool-card.teal { --card-color: var(--teal); }
        .tool-card.emerald { --card-color: var(--emerald); }
        .tool-card.green { --card-color: var(--green); }
        .tool-card.lime { --card-color: var(--lime); }
        .tool-card.sand { --card-color: var(--sand); }
        .tool-card.slate { --card-color: var(--slate); }

        .card-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex: 1;
            flex-direction: column;
            min-width: 0;
        }

        .card-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

        .icon {
            display: grid;
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            place-items: center;
            border: 1px solid color-mix(in srgb, var(--card-color) 28%, transparent);
            border-radius: 13px;
            color: var(--card-color);
            background: color-mix(in srgb, var(--card-color) 10%, transparent);
        }

        .icon svg {
            width: 23px;
            height: 23px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.8;
        }

        .badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }

        .badge {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: 3px 8px;
            border: 1px solid var(--line);
            border-radius: 999px;
            color: var(--muted);
            background: rgba(255, 255, 255, .045);
            font-size: 10px;
            font-weight: 800;
            white-space: nowrap;
        }

        .badge.lock { color: var(--readable-emphasis, #a9d5ff); border-color: rgba(255, 204, 77, .25); background: rgba(255, 204, 77, .08); }
        .badge.admin { color: #ffc0ce; border-color: rgba(255, 118, 145, .25); background: rgba(255, 118, 145, .08); }
        .badge.public { color: #aeeed7; border-color: rgba(104, 221, 181, .25); background: rgba(104, 221, 181, .08); }

        .tool-card h3 {
            margin: 18px 0 7px;
            font-size: 18px;
            letter-spacing: -.02em;
        }

        .tool-card p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.55;
        }

        .card-link {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: auto;
            padding-top: 18px;
            color: var(--card-color);
            font-size: 12px;
            font-weight: 850;
        }

        .card-link::after { content: "→"; font-size: 15px; transition: transform .16s ease; }
        .tool-card:hover .card-link::after { transform: translateX(3px); }

        .utility-card {
            min-height: 142px;
        }

        .utility-card h3 { margin-top: 15px; }

        .footer {
            margin-top: 26px;
            padding: 18px 4px 0;
            border-top: 1px solid var(--line);
            color: var(--muted);
            font-size: 12px;
            text-align: center;
        }

        @supports not (background: color-mix(in srgb, red 10%, transparent)) {
            .tool-card::after, .icon { background: rgba(255, 204, 77, .08); }
            .tool-card:hover, .tool-card:focus-visible { border-color: var(--line-strong); }
        }

        @media (max-width: 900px) {
            .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }

        @media (max-width: 600px) {
            .portal-page { width: min(100% - 18px, 1180px); padding-top: 12px; }
            .hero { padding: 23px 20px; border-radius: 19px; }
            .hero-description { font-size: 13px; }
            .portal-groups { gap: 8px; margin-top: 10px; }
            .section { border-radius: 16px; }
            .portal-groups .section-heading { min-height: 64px; padding: 12px 14px; gap: 11px; }
            .group-icon { width: 37px; height: 37px; flex-basis: 37px; font-size: 18px; }
            .group-count { display: none; }
            .portal-groups .section-heading h2 { font-size: 16px; }
            .portal-groups .section-heading p { overflow: hidden; max-width: 62vw; text-overflow: ellipsis; white-space: nowrap; }
            .card-grid { grid-template-columns: 1fr; gap: 9px; }
            .card-grid { padding: 0 9px 9px; }
            .tool-card { min-height: 164px; padding: 18px; }
            .utility-card { min-height: 136px; }
        }

        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after { transition-duration: .01ms !important; }
        }

/* Badge palette shared with card colors. */
.badge.gold { --badge-color: var(--gold); }
.badge.orange { --badge-color: var(--orange); }
.badge.coral { --badge-color: var(--coral); }
.badge.red { --badge-color: var(--red); }
.badge.rose { --badge-color: var(--rose); }
.badge.pink { --badge-color: var(--pink); }
.badge.violet { --badge-color: var(--violet); }
.badge.purple { --badge-color: var(--purple); }
.badge.indigo { --badge-color: var(--indigo); }
.badge.blue { --badge-color: var(--blue); }
.badge.sky { --badge-color: var(--sky); }
.badge.cyan { --badge-color: var(--cyan); }
.badge.teal { --badge-color: var(--teal); }
.badge.emerald { --badge-color: var(--emerald); }
.badge.green { --badge-color: var(--green); }
.badge.lime { --badge-color: var(--lime); }
.badge.sand { --badge-color: var(--sand); }
.badge.slate { --badge-color: var(--slate); }
.badge.badge-colored { color: var(--badge-color); border-color: color-mix(in srgb, var(--badge-color) 28%, transparent); background: color-mix(in srgb, var(--badge-color) 10%, transparent); }